FeedMe News is ready(ish)

I really enjoyed working on this project. It was great to imagine something and finally have the ability bring it to life.

Here's the link.... FeedMe News.

It's an RSS Feed news aggregator that's supposed to be easy to use for non-internet savvy people. You navigate by clicking on the section headings and then going page by page. You can also search for a subject. For each news item, there is a discussion area. Viewing the site and the discussions is open to anyone, but posting is limited to those who login.

I built it using Simplepie. The Simplepie loads about 30 or so feeds into a mySQL database. When you click on a section heading or run a search, it runs a query to pull the correct news items. There is a short delay when you click because the section gets updated before the items are pulled. A better way would be for the feeds to load constantly in the background, but that was a bit out of my ability.

I had planned to incorporate more Javascript and use it to create a "reading list" feature to the site, but I ran out of time. :( Currently, the only Javascript exists in the search and text boxes which get altered when you click on them.

I am planning to continue working on this and would love any feedback you guys might have!


And for nostalgia's sake, here is my petshop again. :) I sure learned a lot! Thanks!

MySQL - help needed please!

Hi everyone,

I'm running into a brick wall when it comes to joining two tables together in mysql. Can anyone help?

Here's the situation: I have two tables. One table contains a list of news items from a bunch of different RSS feeds (feeditem table). The other table contains a list of all the feed titles and the category for each feed (feeds table). Both tables contain a field with the feed title.

I would like to construct a query that takes a category as input and then pulls the relevant news items. I've been trying various forms of join queries, but I don't seem to be getting anywhere. My latest attempt at a function is below.

Some of my questions:
Is it ok to have a query broken up on different lines for easier readability? Will it still run?

If the array is made successfully, am I correct in assuming that the variables will all have new names? What used to be "id" will now be "table_name.id"?

Should I be using something other than a left join?

I would appreciate any help!
- Sharon


function getSectionFeedItems($section) {

$myQuery = "SELECT snikfarjam_feeditem.id, snikfarjam_feeditem.feedid, snikfarjam_feeditem.feedurl, snikfarjam_feeditem.hash, snikfarjam_feeditem.guid, snikfarjam_feeditem.linkurl snikfarjam_feeditem.enclosureurl, snikfarjam_feeditem.title, snikfarjam_feeditem.content, snikfarjam_feeditem.pubdate, snikfarjam_feeditem.created, snikfarjam_feeds.category
FROM snikfarjam_feeds
LEFT JOIN snikfarjam_feeditem
ON snikfarjam_feeditem.feedid = snikfarjam_feeds.feed_name
WHERE snikfarjam_feeds.category={$section}
ORDER BY pubdate desc";

//run the query
$result = mysql_query($myQuery);


if ($result) {
//create an array that will store the results
$arrSectionItems = array();

//loop through the results returned from the database here
while($row = mysql_fetch_array($result)) {
$arrSectionItems[] = $row;
}
} //end if results

return $arrSectionItems;
}

Final Project Progress

Update: Perhaps it would be helpful if I actually included a link!



My project is coming along! I have to say it's looking better than I imagined it. It's supposed to be a news aggregator where you can see article summaries at a glance (similar to the layout of a newspaper). I still need to fix the article formatting and the selection of which news feeds to share. Currently, I'm only using Yahoo news feeds because they look the best. I intend to add a lot more bells and whistles including:

• user login & registration (mySql)
  
• sectional navigation
  
• pagination (maybe using Javascript)
• search
• comments and favoriting - I wanted to do this by connecting the Simplepie feeds to a mySql database. The problem is that Simplepie will be adding support for this into it's next version. This is something I am still trying to figure out, so far it's not working.

By the way, I would love for some help naming the site. FeedMe News sounded really great a few days ago. Now it just sounds silly. :)

Final Project Wireframes

Hi everyone,

Here are some of the wireframes for my final project:

My latest vision for the project is a news feed aggregator that would resemble the top picture to the right. It's a bit like Netvibes and a bit like Google reader. The main difference between this and existing aggregators is that this one will have multi-column format that's simple to glance through. You won't have to click on links to see the headlines. You only click if you want to read the whole article.

As you can see in the picture, each item will have some nav icons (the ones in the wireframe are just temporary) that will give the reader three options... 1. go to the article now 2. star the article and save it to a reading list... 3. close the article and hide it from view.

Another thing I am thinking about is whether to have all the items be various heights (as in picture #1 and #2) or whether to impose a standard size (as in picture #3). I'm leaning towards the various sizes, but I think it would be both easier and maybe more elegant if everything isthe same size. When I get further along, I'll probably mock up both ways and see which works better.

An important aspect of the site is the reading of the articles. In picture #4, you can see how I envisioned it. I really wanted to have the ability to keep my site on top and let it help the reader navigate through all the articles that were starred. I wanted to have the original article show up in a frame that people could comment on. However, I did some research and it seems that many news sites specifically forbid doing this with their pages. (D'oh!) So, I'm still pondering what to do. I might have just comments on the click through page (kind of like the way digg and reddit work).

Depending on what we go over in the next class, I would like to also incorporate some social networking aspects into the site. I would like to be able to show people the feeds based on most popular of the day/week/etc... (Does that count as something social?)

I'm not sure if I'm biting off too much or not. So far it seems doable! I guess we'll see.

I would love any comments you guys would care to share! Thanks!

My RSS Feeds

RSS is now working with both the Blog and the Image Uploader.

Final Project

I'm really enjoying thinking about all the different possibilities for the Final Project. I find myself first thinking about the audience I want to attract and then trying to formulate a page to fit that crowd. So far, I have lots of ideas and all of them are vague. It's hard to choose! At first I really wanted to do more food pictures, but now I am leaning towards something more newsy.

I would like to make a news page that shows you top headlines at a glance in a more pictorial format than usual. My main issue is that I am unsure where one gets news from! I hope to get some advice about whether this is feasible in class tomorrow. I might also focus it on a specific subject if that makes content easier to get. Hopefully, I'll be better able to make a decision once I have more information.

If that does not work out, I have this whole sideways internet idea that I'll tell you guys about.

My Blog...

After using blogs so often now, it's kind of neat to make your own.

Mine is located at http://onepotcooking.com/sharonnikfarjam/class8/sharonblog/

It's an eyesore, but I think it's working. It has the logging in and stores usernames with comments and posts.

Things to do:

• Clean up some stray code leftover from Amos' examples that I used
• Make it pretty
• Add some functionality so that users can only edit/delete their own comments and posts
  

Please feel free to test. Let me know if anything seems off.

Favicons

Hi everyone,

I found this really neat Favicon generator that I had to share.

http://www.favicon.cc/

Check it out!

Shocked! It's working!

Beyond all belief, my uploader is working!!! I cannot describe the shock and joy I felt when I finally got something to upload. I seriously did not think it would ever happen.

When I first started thinking about this project, I decided to make mine an uploader for Icon files rather than just photos. I did this because icons files are really small, nice-looking, and I have a ton of them on my computer. Plus, I thought it would be nice to have a theme.

Unfortunately this project was too intimidating to do from scratch and I had to study both Jack and David's pages intensely. I owe a big thanks (and maybe an apology?) to both of them. My pages are a mishmash of both of their coding. I understand it pretty well, but I think there's no way I could have done this without their "help".

The only part I feel really great about is the fact that the navigation actually works and seems to correctly pull 50 images at a time. It's nice to finally figure out something without help. Hopefully, in time, I will be able to create more things like this on my own.

So here's my page. It's called ICONography.

I tried to get the lightbox effect to work, but so far no luck. That's my next goal.

PS - In case anyone actually reads this, I might be late tomorrow morning. I heard the LIRR will have delays because of construction work or something. Ugh.

Conflicting Cookies

I would like to suggest to everyone that we all try to set cookies for just our own subdirectories on the onepotcooking.com domain. I think it would be helpful in preventing cookies that may conflict with each other's sites (especially since many of us are using cookies with the same names).

So basically, instead of:
$cookiePath = "/"

you might put this:
$cookiePath = "/yournamehere/"

I'm using this and it seems to work:
$cookiePath = "/sharonnikfarjam/class7"

Too Distracted

Every time I try to work on my assignment, I find myself getting completely distracted by thoughts of the election. This is horrible! Did everyone vote today?

Client-Side Class Assignments

Here are the links to my class assignments to date:

Class1: My Petshop Wireframe JPG
Class2: HTML Coded Wireframe
Class2: My Petshop (based on Amos' wireframe)
Class3: WEBDEV Directory Page
Class4: Shipping/Billing Form with Javascript
Class5: ECommerce Store with Javascript
Class6: Ecommerce Store - Now with PHP!
Class6: Ecommerce Store - PHP - Page 2

Some notes about the PHP: both pages of my store use the same HTML, CSS, and Javascript. I used PHP includes for nearly everything. Each of the two pages have a few PHP variables set at the top which then flow into the Pagetitle and Breadcrumb sections. I used PHP to make background image change based on the Subcategory. I was tempted to do it with Javascript, but chose PHP instead since the background doesn't really change after it is set. It seemed like the sort of thing PHP would be perfect for.

Also, I tried incorporating Amos' solution for the blinking of the info overlays, but so far no luck. I'll keep at it.

Oh yeah, I should probably cite Jon R.'s fabulous Audio Amazon page as the inspiration for my new background images and transparent center section. Mine is nowhere near as good-looking as his, but hey... imitation is the sincerest form of flattery.

Javascript is Frustrating and Sneaky

Thanks to Jung for mentioning the position:absolute detail. I was working on my page for days (with mostly correct Javascript) and none of the positioning succeeded until I set position:absolute in the CSS.

My final assignment is here.

So the moral of the story is that sometimes the Javascript is just fine and the real problems lie elsewhere.

I sure hope future lessons are learned with less pain involved.

CSS Resets

Oh, and another thing...

I was looking at some existing websites out there and found that some of them use a bit of CSS code to normalize cross browser rendering behaviors. It seems like a good idea to me. You explicitly declare everything to be zero at the beginning so all your defaults are the same between IE and Firefox.

I don't know much about it, but it's working so far! (See my earlier post about my page finally looking the same in both browsers.)

At this link you can find further information. Below is the current recommended CSS Reset.



/* NORMALIZE Cross browser rendering inconsistencies

----------------------------------------------- v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* End Normalization */

Plodding Along...

Hi everyone,

I am happy to report that I finally made something that translates from Firefox to IE! This was the first time I have been able to do it, so I'm extremely pleased.

That was the good news. The bad news is that I'm still working on the basic layout. :( I guess I'm a very slow div-maker. I haven't done a speck of the Javascript yet which is really frustrating. I'm looking forward to giving it a try but I still have a bit more layout to do before I can get there.

Here's how my page looks so far:
http://onepotcooking.com/sharonnikfarjam/class5/inclass5_store.html

The Really Big Red Button That Doesn't Do Anything

Does anybody remember that website called The Really Big Red Button That Doesn't Do Anything?




I used to think it was an amazing zen-like place. Now the magic is gone. :(

Success! Beware of your Javascript variable names...

Yes! My validation finally works! The problem was that I was using variable names like "first-name", "last-name", etc. Apparently, you cannot use the dash within a variable name. It seems to be ok within IDs, but not ok within Javascript variables. The function interprets the dash as a minus sign and causes the function to subtract "name" from "first". This is obviously a big no no. So the moral of the story is to beware of the names you use for your variables. Don't use dashes!

Here are some additional rules for naming your Javascript variables as taken from this link:

1.
A variable name cannot start with a numeral. For instance, 3x or 2goats or 76trombones would all be illegal variable names.

You can, however, have numbers within a JavaScript variable name; for instance or up2me or go4it would both be perfectly valid variable names.

2.
You cannot have a mathematical or logical operator in a variable name. For instance, 2*something or this+that would both be illegal... because the * and the + are arithmetic operators. The same holds true for ^, /, \, !, etc.

3.
You must not use any punctuation marks of any kind in a JavaScript variable name, other than the underscore; for example... some:thing or big# or do'to would all be illegal.

The underscore is the exception, and it CAN be used at the beginning, within, or at the end of JavaScript variable names. You can use names like _pounds or some_thing or gallons_ as variable names and they are perfectly legal.

4.
JavaScript names must not contain spaces. Ever.

5.
You cannot use JavaScript keywords (parts of the language, itself) for variable names. Thus window or open or location or string would be illegal. Check a JavaScript reference if in doubt as to whether something is or is not part of the language -- JavaScript has grown into a fairly fully-fleshed language, so you may get some occasional surprises.

You can, of course, use what are otherwise keywords as parts of variable names. For instance, thatWindow or someString or theLocation would all be perfectly acceptable.

6.
JavaScript variable names are CASE-SENSITIVE. Programmers in other languages are often tripped up by this one, as some languages are not sensitive to case in variable names.

For instance, all of the following names would be considered completely different variable names in JavaScript: gasbag Gasbag GasBag gasBag

(just kidding, all you really need is more cowbell)

Sharon's Billing/Shipping Form

I totally don't get Javascript yet, but I am excellent at making my code match other people's so here is my assignment.

It works, but I really don't understand how or why it works. In order to give myself some more practice, I am trying to add some functionality to validate the form and check for blank fields. Unfortunately, the only thing my formValidate function seems to do is break the otherwise working address-matching function. Argh.

So far no luck, but stay tuned...

Sharon's Class Directory Page

So here's my class directory page...

NYU WEBDEV DIRECTORY

For the life of me, I cannot get it to look exactly the same in Firefox and IE. I have no idea what to do!

[If you are using IE, please move along. Nothing to see here.]

Also, I wish I knew an easy way to make a graphical logo. I had a really hard time making GIMP do anything remotely interesting. It's nice that GIMP was free, but I think I am more comfortable with Photoshop.

Colors! ~ Colours! ~ Colrs!

Hello everyone,
Here are some neat sites I found to help you work out the color schemes of your webpages:



COLOURlovers
This is a strange place were people get together to talk colors and their favorite palettes. You can get some great ideas about colors combos that might look nice together.










Flickr Color Fields Experimental Colr Pickr
This is a neat search function for Flickr. It will find pictures for you based on the color you choose.









Idee Multicolr Search Lab
A really fantastic Flickr search device that lets you choose up to 10 colors at a time.






W3School's HTML Color Names
This one you should know. Impress your friends by learning all 147 cross-browser color names!

The Pet Shop is Open

Hi everyone. Here's the link to my petshop:

http://onepotcooking.com/sharonnikfarjam/class2/petshopv1.html

As Robin my partner said, we chose to use Amos' wireframe layout rather than either of our own. His had more interesting details that we wanted to tackle. We worked on the main layout during class, but it proved to be hard coordinating the other details once class was over so I'm sure Robin's will have different images and such.

Every time I look at the page, I keep getting struck by how it looks exactly like the web circa 1998! It makes me laugh. I guess I should have chosen better graphics to avoid the throwback appearance. I look forward to learning how to make something more modern-looking.

Pet Shop Progress - Firebug rules!

Argh!

That's pretty much my first impression with how things are going. There is some progress but things are surprisingly slow. I find myself getting a bit mixed up about what's what when it comes to classes and IDs and where all my CSS formatting is located for each element. Today, I spent forever trying to make a simple line of text go up a bit with absolutely no success. Fortunately, I got a quick tutorial on Firebug and I think things might be easier from here on out.

Here's what I learned:

You can turn on Firebug, select "inspect", and click pretty much anywhere on your webpage. Firebug will then highlight the element (useful for seeing size and margins) and show you where it is in the HTML source. Then if you look in the right hand panel, it will show you all the different CSS formatting that has been applied. The neat part is that you can turn off and on the various formats right there and immediately see how it changes the display. This is great for tracking down where your problems might be. You can also adjust various sizes simply by using up and down arrow keys (especially helpful for figuring out box sizes). New formats can even be added and you can see the results instantly without the whole procedure of writing, saving, uploading, and refreshing. None of it will be saved into your files, so you still have to go back to your originals and write it there too. The benefit is that you are testing in Firebug without cluttering up your HTML and CSS files with code that may not necessarily work.

Class 2: In-Class Assignment #1

My solution to the in-class assignment:

http://onepotcooking.com/sharonnikfarjam/class2/assignment1.html

It has boxes!

Notes to Myself - class #1

These are my notes from yesterday's class. It seems to be pretty much in line with what Amos just sent so I might not do this again. Commentary is welcome – especially if you see something wrong!

In class #1 we:

• Reviewed Terminology/Languages
• Client-side languages: HTML, dHTML, Javascript, CSS, Flash, Java
• Server-side languages: ASP, PHP, mySQL, Java
• Languages we will cover:
• HTML – HyperText Markup Language – system of tags which provide structure
• CSS – Cascading Style Sheets – design
• Javascript – changes behaviors locally
• MySQL – free database server for small businesses
• PHP – Hypertext Pre-Processor – pulls everything together

• Set up blogs
• my address is http://snikfarjamwebdevfa08.blogspot.com/

• Connected to each other's blogs through feeds
• done!

• Tried to create instant messaging accounts
• (you still need to do this since it did not work during class)
• Send your IM name to Amos
• Find a less evil program instead of AIM

• Created folders on onepotcooking.com to host our files
• My nonsense page is at:
• http://onepotcooking.com/sharonnikfarjam/

• Lipsum.com – a useful website for generating dummy text
• http://www.lipsum.com/

• Downloaded a few programs:

· Firefox – best browser (obviously)

· Notepad++ – good text editor with HTML support

· WinSCP – FTP client to use for class

• http://winscp.net/eng/download.php
• class server = onepotcooking.com
• username = scps
• password = ******

• Made a WIREFRAME design for an imaginary pet store site
• The purpose of this exercise was to highlight differences between web design and web architecture
• My wire frame is posted in an earlier blog post
• In retrospect, I think I focused a bit too much on the design rather than the architecture of the site. Instead of just making what I thought was a nice-looking layout, I should have thought more about how the page would work and what layout would highlight that use. Also, it helps to have a clearer vision of what exactly the site would be used for.
• Concepts to remember for next time:
• it’s best to use printable shades of grey
• it's ok to have explanatory notes to the side
• include more details like: dummy links, image placeholders, navigation links, etc.

• Things to do:
• Go to go to w3schools.com
• Go through html, xhtml, and css tutorials
• Review the class notes from Amos
• Make sure you get the class notes
• done!
• It should cover the languages mentioned above with more details
• Be ready for a Quiz next week!

Sharon's Pet Shop - please don't try to buy anything

Blog blog blog!

Blog blog blog!