Just want to make sure I'm doing things right - javascript

I am planning on creating a website with one of my friends. Both of us know next to
nothing of coding and programming. We are planning to display hundreds, potentially thousands
of images on this website. These images will have a short description, and will not be user uploaded, but we may potentially want to implement an option to save the favorite images.
There will be a button that randomizes the images shown (one image at a time). Users will click this button and it will randomize from all the images, displaying a new one on the screen replacing the old one. Is it possible to write code that makes it so it will display a new random image, but not repeat the same image until it has cycled through all of the images (potentially thousands)?
Just from browsing the web, looking at tutorials, and reading some other stuff we've have a general idea of what needs to be done. We need to store the images as files on a server, and store the description of the images and file path on a database. To create the button function we use javascript(?) and write a script that will randomize. Someone mentioned JSON but I don't know what that is.
Are we on the right track? We are both currently looking into PHP. Although we have a general idea of what needs to be done, we don't know where to start as far as tying this whole project together.We are trying to figure out how to start saving the images as files, and implementing them into the database but don't really know how.
tl;dr We would like some guidance on where to go with this, how we can possibly tie all of this together, and if we have the right idea of what to do.
Learning this stuff out of the blue can seem kind of overwhelming at first, that is why I'm extremely grateful for all the advice and answers.

Forgive me for leaving this as an answer. I don't have enough rep to leave it as a comment.
Programming is all about problem solving one step at a time. I'd suggest writing a basic list of all the things your program must do. For instance, in your case, the list may start like:
1. Store img file path in database
2. Retrieve img path from database to display on webpage
3. Attach a description to img
4. Write code to randomize images
5. Write code to display images
6. Etc. etc.
Once you have this, you can start looking into which programming languages are best suited for the task. First each task, you'll usually have several options. For instance, you may decide on PHP or ASP.NET for tasks involving your server. Or JSON vs XML for handling data. I good place to browse basic language capabilities is w3schools.com. They provide pretty basic stuff that someone with no programming experience can understand. Hope this helps! Good luck!

You might be able to limit your technical needs quite a bit in my opinion.
As far as I have understood what you wanna do, you won't really need a server-side scripting language and you won't need a database neither.
And if you are totally new to programming then you would profit a lot on restricting yourselves to one programming language instead of having to learn three (for example PHP, Javascript and MySQL).
So you would "just" need to learn a bit of HTML, CSS and Javascript.
To store the images on your webserver, you just need some FTP client. You will need the FTP client or some editor with FTP client included to upload your HTML, CSS and Javascript files as well anyways.
To save the link or url to your images, you don't necessarily need a database. for example you can put all the images into your HTML code with <img> tags. you can initially hide them by CSS. Or you save the urls of your images by using Javascript arrays or objects (JSON means nothing else than JavaScript Object Notation).
All the logic can be done by Javascript itself. You can use it to randomize the images you wanna display plus to save the images a user already has seen.
TL;DR: I recommend that you restrict yourselves to "just" learning a bit of HTML, CSS and Javascript. Seems like everything you wanna do can be done without needing a server-side programming language or a database.

Related

Using python to click items on a page with text changing javascript and be able to parse the new information

I am looking to find a way to code a script in python that can click all the items in my Steam inventory. For those who do not know what that is here is an example:
http://steamcommunity.com/id/timetoidle5/inventory/#753_0
Ideally it should be able to click each of the links and parse the new information that it gets. Ie. it should be able to find the difference between the different Left 4 Dead 2 cards.
I have done some research and I have been told that downloading the selenium module may be the best way to deal with javascript on a webpage. Although I am still not entirely sure what the best way is. I have heard that mechanize may work as well, but is made for static webpages (webpages with little to no javascript?).
I was hoping also for some tips/steps on how to get started on something like this. I already have some experience with HTML and CSS so I know my way around the syntax and currently I am quickly reading through a Javascript book. I also have done some Python scripting in the past and taken a few introductory courses on it.

Photographic Decay by Page Hits

I'm a beginner in all things code, but am extremely interested in working with it. I am a photo student wanting to integrate digital media and my photographic processes. I was seeing if anyone had any advice for a problem I'm having. I started using Processing to achieve a "generation loss" compression effect to my photographs, and I want to move that to the web. So what I want to happen is every time someone goes to the specified web address, the application, will continue. For example, if I am the first user there, I see the first photograph in the sequence. If I am the 650th person, I see the 650th image. I was wondering if anyone had any suggestions, if I should continue trying to use Processing, or use a javascript, or any other means. Any help would be greatly appreciated! I can also post what I'm using in processing and such. Thanks so much in advance.
You have to break this down into a few pieces:
The first piece is the actual algorithm that "decays" an image based on some number. It sounds like you have that working.
The second piece is storing that number on a server somewhere so that it can be accessed and modified by various users over multiple sessions. It sounds like that's the part you're confused about.
There isn't a way to automagically store variables across multiple runs in a Processing sketch. After all, that entire thing is actually being run on the clients' computer! But what you can do is store the variable in a central location so that everybody can "share" that variable.
There are many ways to accomplish that, which is why people are saying your question is too vague. The most obvious solution would be to use a database, although using a database to store a single number might seem like overkill. You could also setup your web server to increment a number stored in a file every time the page is accessed.
Which approach you take depends on the setup of your program, web server, as well as your own comfort level with programming.
Good luck! It sounds like an interesting project.

Display Comic Book files on a webpage?

I'm thinking about creating a webpage and I'm trying to brainstorm some ways to display them in the page.
If i wanted to get dirty and create everything myself, i think i could do it with html5, CSS3, and javascript/jquery. Just do some kind of page buttons with an image tag and maybe get into some more detailed stuff as it comes up (i dont know how i would do zooming and multiple pages).
But wahat i really want to know is if there is already some way to do this? I've looked around for a bit and cant seem to find any sort of plugin that would read a cbz file or display an set of images with the 'e-reader' type of tools in mind. Just wondering if anyone knows of anything?
Thanks
I used to use an online reader for a long time so I started an experiment to build one myself a while back: netcomix
It's open source so you can see if you find anything appealing in what I did. I figured I'd do all the real UI work client side with HTML, CSS, and JavaScript and the server was strictly responsible for acting as a service (for example, to supply a list of comics or a list of all the pages in a particular issue) and serving up the individual JPG/PNG/GIF files. That compartmentalized things nicely and I was very pleased with how jQuery BBQ gave me a history that I could back through even though I stayed on one page the whole time.
Now if I were to do the same experiment again, I'd use Backbone.js to give some structure to the client side and obviously it needs a lot of love because the server side really does nothing at the moment. Early versions were strictly hard coded although I started putting in some simple SQL stuff in there in the latest version. It's nothing more than an experiment though and should be treated as such. It's there for ideas and little else. If you find it interesting and want some more ideas contact me and I'll be happy to let you know all my wacky ideas for such a program.
I know this is an old question. But web technologies have gotten better in the last few years. There are several comic book readers that can work in the browser using pure HTML and JavaScript. I wrote one called: http://comic-book-reader.com .
If you want to see a very simple example of how to read CBR and CBZ files in the browser. You should check out http://workhorsy.github.io/uncompress.js/examples/simple/index.html which uses the JavaScript library https://github.com/workhorsy/uncompress.js

How can I display images and writeups together without hard coding them as seperate pages?

Have a collection of gallery pages that use the same css. Each of the 20 html files is one that i manually opened, changed the img src and adjusted the links to directly point to the previous and next images in my line-up of 20.
I like having unique write-ups and descriptions on each page, but I'm thinking that this is going to be quite a pain to maintain.
Wondering if there is an alternative solution? I was thinking that it would be great to just maintain a speadsheet of the name of the image, the url, and the description. But that also seems a bit more advanced.
What you're describing is a move from static web pages to something more dynamic. You are correct that it's MUCH more flexible and maintainable, but yes, it's also more advanced than basic HTML. At minimum, you will have to learn a server-side scripting language like PHP and a database language like MySQL and/or a CMS (Content Management System) like Wordpress.
A good exercise to get started would be to recreate your site as a Wordpress blog. It's a little bit of an abstraction -- instead of separate pages with your images and text, you have a single page of code that pulls in one image/text set at a time -- but it's a really powerful concept, and will open up so many possibilities with your site.

Adding nodes to XML with a form

I've created a list using XML and have embedded an XSL stylesheet in it. Now I want to know, because this is a list of movies that constantly grows, is there a way to create a form that will add child and grandchild nodes to the list.
I'm thinking there might be some javascript involved, but I have no idea what I'm doing when it comes to scripting.
If the intension is to write new entries into this xml file you need to look at some form of serverside scripting. Javascript can not write to files.
PHP is probably the easiest to understand, start by buying a book that explains the basics with a few examples, it's not that hard to grasp, and a form and a simple function for writing to files shouldn't take you to long to figure out.
If you have no interest in that sort of thing, hire someone to do the job for you, it will probably only take a few hours for someone who knows what they are doing to get a complete system up and running for you, and unless you really would like to learn a serverside language that is probably the best option.
If you really want to do it all on the client side, you can try HTML5 client-side storage. This means the data will be persistent only for the user that enters the data (and only for the browser used to enter it, and only on the computer that was used).
If you want the movies to be accessible to multiple people, or from multiple computers, you need to use server-side storage.
FYI, HTML5 storage is not yet very well standardized across browsers.

Categories

Resources