Advice on web app.

vorticity · March 22, 2016

I have a question on what's the best route to take when developing a wep app that has to work on android, ios , and desktop environments. I know I need knowledge of HTML5, CSS3, and Javascript; but I'm still confused. HTML will take care of how the web app looks, CSS will set styles specific to their OS, and Javascript will take care of complex programming like file i/o, graphing, images, etc. Is that statement correct? Also a little background on myself; I am not a web developer. My programming experience is with C/C++, Python, and Assembly. Any suggestions would be greatly appreciated.

JefferyD90 · March 22, 2016

6 minutes ago, vorticity said:

I have a question on what's the best route to take when developing a wep app that has to work on android, ios , and desktop environments. I know I need knowledge of HTML5, CSS3, and Javascript; but I'm still confused. HTML will take care of how the web app looks, CSS will set styles specific to their OS, and Javascript will take care of complex programming like file i/o, graphing, images, etc. Is that statement correct? Also a little background on myself; I am not a web developer. My programming experience is with C/C++, Python, and Assembly. Any suggestions would be greatly appreciated.

Well, depending on if it needs a database you'll need to learn how SQL, PHP, Perl, and other such things.

What are you building the app to do?

vorticity · March 23, 2016

3 minutes ago, JefferyD90 said:

Well, depending on if it needs a database you'll need to learn how SQL, PHP, Perl, and other such things.

What are you building the app to do?

The plan on accessing everything locally instead of over the internet. The only reason for the web app is so I can access it on multiple platforms.

maremp · March 23, 2016

HTML, as it says in its name (Hyper Text Markup Language) is a way to define structure of your page. Some elements have a default style associated with them (OS specific, can also vary depending on browser). In a way it's also defining how your page looks, but in most cases, CSS is used to make it look better.

CSS will not "set styles specific to their OS", unless we're talking about default styles, which are applied by the browser. It could be a bit browser specific, but that's more of a bug than a feature. In theory, CSS should add custom styles to a component and should look same on every browser/OS combination.

Not sure how JavaScript would take care of images. You can use it to load images, but that is a bit more complex and usually very specific to implementation. It's usually done via img tag inside html or url value in css. Also with the graphing, you are correct that JavaScript is (usually) involved, but it's a mix of JavaScript that generates elements, HTML structure that represents the graph (svg) and CSS that makes the graph look nicer. As for the file IO, you can't do that directly with JavaScript, all file system access is prohibited inside browsers, since it could be a very huge security risk. All interfacing with file system is controlled by browser and it's triggered by file input html tag (the box that pops up when you click a button to upload file) and you can't affect it with JavaScript, other than check the input after upload. That is if we are talking about the traditional JavaScript running inside a web browser, it's a bit different with Node.js, but let's not get too far ahead.

This is the front-end part, i.e. the things that run in a browser, either on desktop or mobile device. It's called front-end since this is what every visitor of your page will see. And they can get the source too - you can't prevent that.

The server that takes care of user's request is called back-end, because users can't see exactly what's going on and can never get the source code. It's kind of a black box, user asks for something, called a request. The server then processes the request and outputs something out, it's called a response. Response can take all kind of shapes, it can be text, image, video, html page etc., and if the browser knows what to do with it, it will display it properly. For example, it knows how to display an series of bytes that should be an image, so it renders it when you click that cat.jpg url.

A simple back-end is a server that accepts an url and just serves the response, without performing any logic, those are called static servers. Your file system itself is kind of a file server, you can open an url via file:// protocol and use absolute file path to send a request to display the file. This is technically a back-end, but it's not referred as that. What we call a back-end is a server with some logic, that accepts a request and processes to output a response. You'll need to use a back-end f you want some additional logic, for example user registration and login, posting and so on. This can be done with a lot of languages and their accompanying libraries or frameworks. Since you already know Python, you could check out Django, a Python framework for creating back-ends using the MVC pattern.

To store users and their posts, you will need a database. Relational databases using implementing SQL standard are used most commonly, I would suggest checking out PostgreSQL or MySQL, those two are among the most popular and in my opinion, PostgreSQL is better and it's also used in more professional projects, if you want experience for potential employment.

Just please do yourself a favor and don't learn Perl for web development, that stuff is old and rarely used in new project nowadays. I would also suggest to avoid PHP, at least until you are proficient enough in programming to understand all the things that it's doing wrong, or you can easily fall down the rabbit hole of bad programming practices.

Attempt to explain it simply:

- HTML: Describes the structure of elements, for example, a container element, with 2 paragraphs of text and a button.

- CSS: Tells the browser how to render these elements, for example the first paragraph should have grey background, the second one should have red text and the button should have a larger text and be all the way to the right of page. If you don't add any css, there will still be some directions for browser to render these elements and it's called default stylesheet, something that comes packed with every browser.

- JavaScript: Allows you to add logic to your page, for example when you click the button, the paragraphs should hide.

Edit: I started writing this as a simple response, but after 45mins later, this is what I came up with. When it comes to topics like this, I can easily get caught up and ramble on and on. I'm sure there is a lot of stuff that is hard to understand, so don't feel ashamed to ask for clarification or you can even send me a PM with more questions and I'll find the time to explain it to you with best of my capabilities.

vorticalbox · March 25, 2016

On 23/03/2016 at 0:02 AM, vorticity said:

The plan on accessing everything locally instead of over the internet. The only reason for the web app is so I can access it on multiple platforms.

by doing it locally users get access to all the files and thus can modify what you have set up, if you're doing anything that needs to be secure you will have to move to a server laguage to handle requests.

You should have look into jquery mobile you link and you can use their tags not much different than html and can nice mobile effects and what not.

http://www.w3schools.com/jquerymobile/