Author Archives: Jane Hubbard

jQuery Slideshow

Leave a reply

https://github.com/xof88/Homepage-Assign

Creating an Interactive Slideshow with Captions Using jQuery

This week’s jQuery lessons in Codecademy were a breath of fresh air! I really felt quite lost last week with JS, but things started to click for me this week with jQuery. CA still had some kinks this week (also no option to “Get Code”!!!), but with some help from Google, I finally got the hang of it about a quarter of the way into the lessons – and it was pretty breezy from there on.

I followed Greg’s instruction and added my images, captions, and dots(buttons) to my index.html file I created a few weeks ago for our homepage assignment, and linked to my new script.js file. As I moved through the lessons, I went back and forth to my JS file to begin building out my slideshow for my homepage. When I got stuck, w3schools tutorial was immensely useful – it really helped to see how all the pieces fit together: HTML, CSS, and JS/jQuery. Once I felt like I was in a good place, aka. the slideshow worked (yay!), I then played around with and added to my stye.css file for my homepage.

One area I am stuck on is how my slideshow first displays (or doesn’t display) in Chrome and Safari. On Chrome, all four images initially stack on top of each other, until I click on a button, at which point they become a slideshow. Also, the slide numbers, captions, and buttons are not ON the pictures (but above and below.) It doesn’t seem to be reading the CSS which styled the font size, color, etc… either. I’ve searched Google endlessly, but I don’t think I’m using the right terms.

The jQuery is working great in Safari, except that the images do not initially display at all – I have to first click a button and then the slideshow can begin. Again, Google hasn’t solved this one for me yet either. Any ideas class? Anyone else have either of these issues?

On a separate note, I am looking forward to our midterm project. I will be profiling a coworker’s husband who is a web developer for Discovery. Prior to joining Discovery a couple years back, he was a developer for a PR agency. I chose him because he has an interesting story about how and why he got into web development that I think the class will enjoy reading.

Cheers,
Jane

Not Jiving in JavaScript, Yet

Leave a reply

I found this week’s Codecademy lessons on JavaScript (JS) and jQuery quite difficult. I got lost a lot because each new step built upon the last, and the lessons didn’t (unlike previous lessons) do a great job repeating each step over and over so it could sink in. Also, the building blocks of the language weren’t as simple, straightforward, and intuitive as I found those in HTML and CSS to be. The data types and console.log statement seem easy enough, but once we started building in operators and functions, arrays and loops, I got lost. I found myself needing hints and cheating to get the code… it was very frustrating.

Also, for the first several lessons I kept wondering how this language would jive with what we have learned in HTML and CSS. I think I would have preferred to have the JQuery lesson first, then the others to follow. That last lesson did a good job explaining how to link JS to the DOM and how they interplay with each other in real time on a website. Because I wasn’t able to attend class last week and missed our initial discussion about JS, I did some research on my own and found what I think are a couple good “Intro to JavaScript” resources others might find helpful:

  1. w3schools.com — https://www.w3schools.com/js/js_whereto.asp
  2. dummies.com — http://www.dummies.com/web-design-development/javascript/javascript-and-html/
  3. betterexplained.com — https://betterexplained.com/articles/the-single-page-javascript-overview/
  4. htmldog.com — https://www.htmldog.com/guides/javascript/beginner/

Questions for the week are: what is the recommended order for developing HTML, CSS, and JS?; could we inspect a couple webpages to see how they are using JS?; if I wanted to create a rotating image block, is that done using JS?; and is an RSS feed JS? Also, would one ever code JS in CSS?

I look forward to working through some examples in class on Wednesday and spending some more free time practicing all three languages!

Cheers,

Jane

Adventures in Creating a Homepage

1 Reply

Using HTML and CSS

Now I understand what Prof. Linch meant by having an idea of what you are developing before you begin. When building my new homepage, I started putting in code before I really knew what I was doing… and about 30 minutes later, I deleted most of it and started over with a vision! (see below)

screenshot of homepage

A couple challenges I faced that required a Google Search were:

  • How to link certain text within a paragraph and not the entire graph, or having to have the text on a separate line
  • How to download an image from the web and use it, legally cited of course, on my page; then how to display it on my homepage
  • Why my background color displays in Safari but not Chrome (Still unclear, ha! Something to do with fact my HTML file is saved as Chrome and my CSS file is saved Safari? Is that default — I didn’t select that.)
  • Several failed attempts to link my HTML and CSS files 🙁 But alas, some tiny edit made it click! (I think I simply removed a forward dash before style.css!)

My next challenge will be to further the CSS styling on my homepage. I plan to visit a few sites I know I like the look and feel of, and study the source code to see how they have been developed. There was so much to learn about CSS styling in our Codecademy lessons this week — I would like to play around more with opacity, overlapping content, margins, padding, etc…

I appreciated the w3school’s article, “Responsive Web Design – Intro,” especially the images of the expanded desktop, smaller tablet, and compressed mobile display. The article did a good job explaining what responsive design is, how it works and should look, and how to program the tool (though a lot of practice is warranted). Seems like a practice every programmer should utilize this day in age for UX given that mobile is taking over as the top device on which user access the web. Once the article gets into “grid-view” and “media query” I got a bit lost and was wishing I was taking a lesson in Codecademy:) On a related note, I found the alistapart article outdated and hard to follow — give me some images!

Cheers!!

Jane

HTML Reflections

Leave a reply

Codecademy Profile: https://www.codecademy.com/Xof88

GitHub Repository: https://github.com/xof88/hello-world

HTML Reflections

Codecademy was super easy and helped jog my memory of other intro HTML classes I’ve taken. I hardly retained anything from those 1-day courses, except that these 2 lessons probably made a bit more sense to me than they would have otherwise. (This article — specifically the slides and list — rocked! Really pulled the Codecademy lessons together for me into a narrative. )

That being said, I was totally lost when it came to GitHub. The lesson was easy enough to follow, instructions-wise, but I had no context for what I was doing or why? The repository will hold the code for my project? And I will test things uses the branches? Is it a CMS?

I find the web inspector functionality cool, kinda fun, but again, I am at a loss for it’s purpose. Why would I even use it, or need it? Is it simply a learning tool? Or does it help me should there be an issue on my website — flag the problem for me? I’ll be interested to hear some of it’s application in our next class.

Computational Thinking and Open Source Data

Leave a reply

I find your comparison of computational thinking and journalism to be very interesting. It seems that computational thinking is just a more modern term and view on analytical thinking that incorporates today’s rapidly changing, technology-focused world. I have always generally thought there were two camps of people: the left brain, logical math and science people, and the right brain, creative writers and artists. Myself being the former. And this is actually partially why I went into communications, to challenge myself and force myself to learn to be more divergent, look outside the box. But we are who we are, and I naturally found patterns to guide my writing and use formulas to generate new ideas. I’m curious to see how this semester shapes my thinking (or my way of thinking shapes how I learn web development?) and whether it changes the way I approach my job in public affairs and future career path. 

I was listening to a TEDtalk podcast recently on open source data and how the concept has changed the world, and will continue to do so. The possibilities are limitless… I particularly liked two talks: one about open sourcing the design and functionality for an underwater diving robot, and the radical notion of an open source democracy where citizens vote on each issue before Congress. The host of the podcast talked about Linus Torvalds and his novel idea to open source his operating system Linux. ‘Free software” leads to new ideas and innovation, but also allows for people all over the world to get more affordable smartphones like the Android. I also heard a talk by Tim Berners-Lee on creating the World Wide Web and his, some would say insane, decision to demand the web be open source for all to use (aka. no charge.) But if he had not chosen that path, the WWW might not exist today, but instead would be millions of databases that don’t talk to each other.

I appreciate the other programming philosophies and guidelines, and look forward to a great semester putting it all to action!

Github Profile – https://github.com/xof88