Analysis, Reflection, and Organization

[ebeshero]

@Samantha-Mcguigan @jonhoranic @ajnewton1 Sam and I are looking reflectively at the website so far, and we're noticing that all the graphs are getting sort of lost by being all on one page.

My suggestion: The Analysis page should just be a Landing Spot, with a link out to each CATEGORY of analysis you are doing in this project.

Your task should be to identify the different categories of analysis you're doing. For each category, the graphs + write-up can appear on its own distinct page. You don't need to add all that to the menu bar, because Analysis will lead to each one.

Once you've done this, you need a conclusion page, or a space SOMEWHERE PROMINENT on the site (maybe even the Home page(!)) that Reflects on the major discoveries you've made and links to specific pages for more information. That will help draw attention to the visualizations and what you've learned from this project!

[Samantha-Mcguigan]

@jonhoranic @ajnewton1 hey guys! Im gonna be working on the website files to better organize the site so don't edit anything right now so we don't have any merge conflicts!

[ebeshero]

@Samantha-Mcguigan Yay! I'm working in the eXist-db on prepping the KWIC stuff. When I get to the PHP part, I'll do that over in my own branch off of your repo--and issue a pull request when its ready so one of you can pull it in--probably before your meeting tomorrow.

[Samantha-Mcguigan]

@ebeshero I'm having a problem styling the header using CSS. It is doing it fine when I open the file locally but not when I open it in a web browser.

This is my html:

            <div id="menu">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="BBC.html">BBC</a></li>
                    <li><a href="CNN.html">CNN</a></li>
                    <li><a href="FOX.html">FOX</a></li>
                    <li><a href="NPR.html">NPR</a></li>
                    <li><a href="analysis.html">Analysis</a></li>
                    <li><a href="topics.html">Topics List</a></li>
                </ul>
                <img class="cc" src="cc.png" />
            </div>

and this in my CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

W3 schools says this is supposed to take away the bullet points and like I said, it is when I open locally but not in the browser

[Samantha-Mcguigan]

So its working is Safari but not in chrome?

[ebeshero]

@Samantha-Mcguigan It's not working in either browser for me. Did you upload the new css to the server?

Also, as I'm tinkering with a search.html page, I made two server-side include files to contain your top menu and your footer, just because I didn't want to keep copying them out. You may want to load your new code into top.html and bottom.html. These aren't in GitHub (I'm working in my branch), but they're on the web server. Might make life easier to keep your pages consistent across the site.

Your files are not currently reading the server side include. You need to invoke it. See directions at http://newtfire.org/dh/SSI.html and make sure you set permissions on any files invoking SSIs to be executable by owner, group, and public on the web server.

[Samantha-Mcguigan]

I did upload it to the server.

I also tried making a menu.html server side include but when I tried to style that in the CSS it wouldn't work either so I thought the problem might be with the list being in a SSI rather than in the document itself.

[ebeshero]

@Samantha-Mcguigan If it's in an SSI the styling will apply, but you'll only be able to see it when it's on the web server. My SSI is working here on the page I'm building: http://newsanalysis.newtfire.org/search.html

(The search isn't quite connected up with eXist yet...I'm working on that!)

[Samantha-Mcguigan]

The SSI is working but when I try to style it in CSS is the styling is not applying

[ebeshero]

@Samantha-Mcguigan Sometimes there's a delay in getting the browser to respond. You have to fully refresh from the server because it'll use a cached copy of the CSS otherwise. To refresh Chrome on a Mac use:

command + shift + R

And when I do that, I see you're definitely making changes to the CSS!

[ebeshero]

@Samantha-Mcguigan PLEASE can you change the CSS or the menu elements back? I can't even see the search enter box I'm trying to test...

[ebeshero]

@Samantha-Mcguigan I'm going to replace the top.html file with mine on the web server. I can't see what I'm doing otherwise, and I need to be working from the web browser.

[Samantha-Mcguigan]

okay im working on it

[ebeshero]

@Samantha-Mcguigan It's back the way it was before...I tried fixing it by re-uploading my top.html without the list items, but it won't budge. Can we debug that CSS? I can't see my search box, and I have to test it live on the server...

[ebeshero]

@Samantha-Mcguigan Do you mind if I put the old CSS from a couple of days ago up until we've figured this out?

[Samantha-Mcguigan]

I tried putting it back to the way it was but nothing is working. I don't know what is wrong, do whatever, I won't touch it

[ebeshero]

@Samantha-Mcguigan So--here's how to test it locally: Don't use the SSI yet since you have styling to debug. Paste the elements back in to the local file, and mess with the CSS locally until they look right. Then when they do, put the SSI portion back in top.html, and post the CSS, and it'll be fine. I didn't realize how problematic the new CSS was.

[ebeshero]

@Samantha-Mcguigan I know that @jonhoranic was working on CSS flexboxes for controlling the site, and I wonder if you two need to discuss that before doing too much editing of the layout?

[Samantha-Mcguigan]

@ebeshero I'm looking at the CSS and this was in there:

a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
}

when I take it out it seems to go back to normal when I open it locally

[ebeshero]

@Samantha-Mcguigan Yes, I bet that was it! display:block makes everything line up as a block on the page--it would force a vertical layout of every link.

It should be fine to set up the menu items as a list, too! I just put everything back on the web server as it was....

And I ALMOST have the search working...I got it to spit out results from eXist--but I need to figure out how to put in quotation marks around the search string...nearly there.

[Samantha-Mcguigan]

Sounds good! Ill keep messing with the CSS locally and wait till tomorrow when we are together to put it on the site.

[ebeshero]

@Samantha-Mcguigan Here's a page of search results!

There's ONE thing I'd like to do with the CSS. The search highlight terms are invisible here because they are being highlighted by default in white! (so it's white text on your white background). The highlights are held in <a class="hi" href="url"> elements, and they're basically set to link out to the original news article where it's posted on the web! But we just need to change the color to something that will be visible, like red. Do you want to do that, and upload the CSS? Or do you want me to do it from here? It would be adding a style just for a.hi for these search results to stand out!

[Samantha-Mcguigan]

I'm still messing with the CSS locally and I don't want to put my changes in yet until I have it right so if you just want to do it I think that would be safer. Or if not I can change it later after I finish messing with the CSS on my end.

[ebeshero]

Try the link above again, to the search results. The link wasn't working a second ago, but is now!

[ebeshero]

@Samantha-Mcguigan I'm not sure if you're the one working on the CSS right now, but can you just replace the CSS styling for the a elements with this?

div#menu a:link, div#bottom a:link{
    text-decoration: none;
    color: #FFFAFA ;
}

div#menu  a:visited, div#bottom a:visited{
    text-decoration: none;
    color: #FFFAFA;
}
a.hi {font-weight:bold;}
a:link{
    text-decoration: none;
    color: red ;
}

a:visited{
    text-decoration: none;
    color: green;
}

That will permit us to style links in the body of the text so that they can be read against the white background! I keep updating the style.css on the web server and then my changes go away. I don't want to interfere with what you're doing, so if you can just add this code to your file, to replace the link styling you currently have, we'll be okay, I think.

[ebeshero]

Meanwhile, I have the search page working! See: http://newsanalysis.newtfire.org/search.html

Try searching for a word or a part of a word! The input box fires JavaScript, which triggers the PHP that calls the XQuery script and bundles up the results--and you can click on the matches. If a <hyperlink> was available in the file, the search results link straight out to the original news source site. If we can apply the CSS code above to differentiate links from the menu bar vs. the search results in the body, that would be great!

I'm going to issue a pull request for you all to pull in my code for this. I suspect we'll likely have a merge conflict over the CSS, but I think we'll be able to resolve it in the meeting tomorrow.

[ebeshero]

Here's the pull request: https://github.com/Samantha-Mcguigan/newsAnalysis/pull/17 I've used the latest CSS posted on the website as of 1:12am this morning, and I've added my code to replace the link styling. Please just add that code to your own CSS as you keep working, so the search engine's highlights are visible in the body of the site! @Samantha-Mcguigan @jonhoranic @ajnewton1