How best to make a web app with multiple pages? - html

I'm trying to make a multiplatform offline webapp using PhoneGap. I know my html and css, but I'm not altogether familiar with the full capabilities of JavaScript, and I've never made a webapp before, let alone tried to use phonegap to empower it.
Right now, I have the main index.html that phonegap sets up for you, but now I'm uncertain as to how to proceed. If I want a button to take the user to another page from the main page, should I make a second html file and literally link between them, or is this a lot more complex than that?
Also (get ready for a possibly epically stupid question from a total beginner):
Do web apps have to be online? I'm really not clear on whether they function like normal websites in which they need to be hosted on a server, or if they can be packaged up and downloaded just like normal native apps. Please help!
Thanks.
Oh, and btw, I'm working in Xcode with the phonegap addon thing....I'm trying to get it running on the iphone before I move on to android.

Although the other answer helped me at the time, I thought I would add a more complete answer now, five years later, to my own first StackOverflow question.
To start with, a "web app" is the same as a "website" in a technical sense, and yes, they have to be hosted on a server in order to be accessed through the browser...just like every website. The only distinction is that a web app is generally a more dynamic and complex sort of website, involving JavaScript and AJAX. It would be misleading to call a simple website like this one a "web app," whereas Facebook is definitely a web app. Basically all web apps are websites, but not all websites are quite exactly web apps.
However, it only has to be "online" if you want it to be accessible anywhere from a browser via http. If you're making a Cordova app like I was at the time, that's not relevant. If you only want to run an application locally, you can do so with a local server like Python's SimpleHTTPServer or the one webpack provides, or any other alternative, including a server you write yourself from scratch.
As for the primary question about having multiple pages, yes anchor elements like my link are the standard way of connecting pages. To link among your own pages, you would have multiple .html files, and you would create a link with an href like href="myOtherPage.html", where that file is contained in the same directory as the file for the page linking to it. Alternatively you could set up a single-page-app where JavaScript loads new page content without the use of anchor elements-- in that case multiple .html files are not needed. Frameworks like Angular and React are helpful for accomplishing that, but it's by no means necessary.

In a typical web app, most of the time you would just need to create a link as you would if you were creating a link on a website. Also, Web apps can be developed via a local environment (research Mamp/ or Wamp) depending on the dependencies in which your app require.

Related

How do I upload new posts with an admin panel to a Github-hosted webpage?

I have a webpage, actually a blog, posted with Github Pages. It's a simple HTML&CSS page. Normally, I create new files with my new posts in them and upload these files to my repository. However, I want to create an admin panel. Especially in order to post easily, and manage my blog (like adding tags, comments etc). I don't know where to start or what to use. I know how to program in C & C#, so it's not a problem if I have to learn a new language.
Any help would be appreciated.
You may be able to use a Headless CMS. These approaches normally are driven by git or some kind of API (you don't have to write any backend code) to add content to static sites such as yours. Although most of them work with markdown, so you may need some way to render the markdown into your HTML.
Headless CMS is normally used within Jamstack projects, so I'd suggest checking that out if that is something you're interested in.
I learned that I need server-side processing with languages like PHP or Phyton. However, Github Pages is a static site service and does not support dynamic web sites. So I will whether keep writing locally or consider another hosting services.

Updating my website/ web hosting?

I'm new to web design and website deployment. I had some general questions that I tried to research but failed. I know how to use Html/CSS/Javascript and I managed to design my own website and upload it and host it using Amazon s3 / Route 53. It's a website built from scratch with HTML, CSS.
The thing that I have failed to understand is managing the website after deployment. Do I simply add HTML pages to my amazon bucket whenever I want to update? is this the way to do it? I came across jekyll in my research and from what I understood, it's a static website generator. But does it help with organizing the website and facilitating adding more content after deployment?
in other words, how do developers go about managing their websites generally after deployment?
I don't know about the Amazon s3 or jekyll etc. How I manage my sites is I use a hosting provider that provides Plesk. With Plesk I manage all my files for my sites in the file manager and I can even edit the code in the online code editor provided. It also has built in apps like Joomla and Wordpress.
I can set up email addresses for each site and also subdomains. Security etc.
When I want to update or edit my site I will either do it in the online code editor if it is something small like changing a color or just a few lines of code. Otherwise for bigger edits I will do it all on my desktop using notepad and then upload all the new files and replace the existing ones.
Each domain has it's own folder in the directory so it is easy to maintain and things don't get messy.
I hope this helps. You said you want to know how developers manage their sites. Although I am not a professional developer, I do have a few sites and that is how I manage them.
It only costs £40 per year too so is quite cheap.
Do I simply add HTML pages to my amazon bucket whenever I want to update? is this the way to do it?
Yes. The simplest way is to make changes to your files in your local workspace and then upload/overwrite the changed files to the S3 storage.
But does [jekyll] help with organizing the website and facilitating adding more content after deployment?
Yes! Jekyll is a great way to organise and generate your static site and I highly recommend it if you are planning to continue creating and deploying content to your site.
Start here, but note that it's a little more difficult if you're on Windows OS.
https://jekyllrb.com/docs/installation/#requirements

Add image files (or other resources) to project

I am building an application with a Google App Script project that will be entirely housed within Google Sheets. I am using different tabs of a sheet for data storage and building HTML-based dialogs and sidebars to navigate the application. I am not going to deploy this as a library or web app, and I am not planning on utilizing any other web server of my own creation.
It is going well so far, but at this point I would like to added embedded resources, e.g. images that can be used as backgrounds of web pages. I can add .gs files and .html files fine to cover server-side coding, client-side coding, and styles, but I do not know of a way to add other files to the project. If this were a conventional web-based development process, I imagine I'd have something like an "img" folder at the root of my server entry point -- that's the functionality I am looking for in a GAS project.
Is it possible to add embedded resource files to a GAS project? Alternately, is there some way I can encode binary resources in an HTML file and then decode as needed to appear as usable content? I can certainly build adequate data-entry forms without additional resources, but things are going to look pretty spartan.
I did find a previous question that mentioned workarounds like placing resources in Google Drive alongside the Google Sheet w/ script, but that was from 4 years ago. Was wondering if there was a better/preferred methodology now that I am simply missing. That other question can be viewed here:
Elegant way to store resources...
Partial answer
If this were a conventional web-based development process, I imagine I'd have something like an "img" folder at the root of my server entry point -- that's the functionality I am looking for in a GAS project.
Google Apps Script doesn't have a root folder. Non-code resources should be hosted somewhere else.
See also
http://www.google.com/script/start

Going from webpage to website

I have been coding html/css for some time now, and I've gotten to be proficient at coding single webpages, but I can't figure out how to code a website. Some questions I have are:
Do I need to buy a domain if I want to build a website (for practice)
Are their special things I need to know (such as special tags) that I wouldn't have learned from coding just a single page?
Should I learn how to use a grid if I am coding multiple pages?
You may want to first decide what kind of back end you want (the server side code that builds and delivers the pages) I strongly recommend rails, and a react.rb.
You do not need a domain name.
A great way to start is to use a service like cloud9 which is free, and will get you going in no time. Cloud9 will do a one button setup of a rails environment and get you going.
Another approach is to begin using react.rb and just expand your skill set from the front end towards the server. The react.rb tutorial creates a simple chat application and you can do this all with the tools your already have. Once you have mastered that you can set up a simple rails server and start adding server side persistance (saving data on the server.) This is the approach I recommend, but full discloure: I am one of the leads on the react.rb project so I am very biased.
Well, you can build simple to wonderful STATIC websites from HTML/CSS but if you are talking about some serious web development then you will need to learn a server side scripting language. Most of the websites these days are database driven serverside webpages. There are many serverside programming languages and tutorials for the same out there.
I suggest you start with PHP (for scripting language) and MySql (for database)
Again, the choice of language is totally upto you.
Then you would need to learn about setting up a server on your local computer. For this you will need to learn about (x)-AMP. This would be WAMP, XAMP, MAMP depending on what OS you are using.
If you are only needing to develop a simple CMS website, then there are alot of CMS framework which you can go for, which will not require much of coding.
It seems as if you are looking to connect multiple pages to the same website, so you can navigate between pages. And it seems that you want to practice with local files. If that is the case, you need to first create a local folder for your website and use the a tag in your html files. Inside the a tag, you will need to include an href with the url to your other page. A link to another html page that is saved in the same folder as your original will look like this:
New Page
You will want to use external CSS and JavaScript files to keep all of your pages in the same format.
http://www.w3schools.com/html/html_links.asp
http://www.w3schools.com/tags/tag_link.asp

Phonegap JQTouch Joomla and MySQL application

I am working on a project and it needs to accomplish the following:
A user logs into a joomla
Makes a change to some of their profile
This new information updates in the
database
Up to this point joomla will do everything, so the question is how do I take the information from the database and call it into a phonegap app. I am using phonegap and jqtouch for the app, and joomla with jomsocial for the update side.
I cannot have the app open into just a mobile version of the website because apple will reject it from the store. I need this solution to work for people to make updates to their profile, and these updates will automatically post to their app. All users input data on the same site, and share a database. Each profile however will have a different app that is released to the markets, so right now I am focusing on a template framework that can easily be changed to the users portion of the database.
From my understanding the php files stay on the server to process information. The big question is how do i call this information into a phonegap app?
To display XML as HTML you need to parse it through an XSLT stylesheet. This transforms your XML nodes into HTML. Of course, you could just use a PHP XML parser. I think there's one bundled with Joomla, but there are lots out there.
I was going to suggest using a Joomla plugin to push the data over to the Phonegap app. There are lots of events that are fired when an account is created and you could manipulate that.
If the XML is local, Jeepstone is correct. If it is not, how are you going to get it? To do this without running into cross domain issues, I suggest you try out this jQuery plugin on the phonegap side of things ... http://code.google.com/p/jquery-jsonp/ . So to take advantage of that nifty tool, you will adjust the public functions in this script to echo back json_encoded array. With which you can then do as you want on the phonegap side of things.
Ya Apple wants your app to not be useless without internet. But it is straightforward to create your index.html to show the user something. Use the failure and success functions in the jsonp library to show connection problems if necessary.