I am newbie to Jquery Mobile, so far what ever examples i searched contains only one html page for whole application, with multipe div tags where each page/screen is defined as div tag with data-role as page with some header and footers optionally. Based on user actions, we are hiding some div's(pages) and showing only expected page. Also, this multi-page template seems to be standard design, as written by some blogs. Are there any other designing ways? what I would like to have is multipe html pages, for ex one for login, one for home, one for contact etc. Other wise it is difficult to understand/code/debug issues, especially people from Java background like me.So, what I want is some kind of MVC design with JQueryMobile, like each view/screen as sepearate html associated with one js (Controller). Can we have multiple html pages in JqueryMobile app? If possible how to pass data/ maintain session between them? Any samples are most welcome. Thanks In Advance.
Note: Also I don't want server side includes, may app contains 10 to 15 screens, each page will make a webservice call and fetch some data and map it to UI.
As jerone mentioned above, the jQuery Mobile documentation clearly says
We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.
See http://jquerymobile.com/demos/1.2.0/docs/pages/page-template.html
Each page (which can be a static HTML file or anything produced by a script (e.g PHP, Python or whatever)) is thus standalone and transitions from one page to another are done using AJAX calls.
There is no such thing as a controller except if you assume that your browser is one!
You can use multiple html files if you want. jQuery Mobile will automatic include these with AJAX: http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html
Anyways, jQuery Mobile recommends one big html file with multiple pages.
From http://jquerymobile.com/demos/1.2.0/docs/pages/page-template.html
This template is standard HTML document with a single "page" container inside, unlike a multi-page template that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.
Related
a quick background. I have my website done using asp.net (webforms I believe) and it has default.aspx with sitemaster page (not mobile friendly). I have added html pages with separate css as well. (a) Except for main page default.aspx, all other pages are in html (it uses display: block, floats etc., but I am moving towards flex and grid in newer html pages to make it more mobile friendly but still I am constrained by default page though I could try to make that mobile friendly). However, I am left with page url extensions, mobile unfriendly site. Currently web.config is used for url redirection.
I thought of going fully with html/css/javascript if so how could I handle url redirection and removal url extensions? Or shall continue to use a mix of aspx and html pages as I currently have and update for responsiveness and eliminate url extensions using friendly urls nuget package. May be there is a better way. Appreciate your thoughts and input. Thank you
Sorry, how are you constrained by the default.aspx page? You should be able to use HTML classes and tags on it like anything else and render it responsively like the html pages. ~.aspx pages are just pages of HTML that allow code blocks and form controls on them that get processed by the server into html and AJAX (if there's a corresponding code behind file and the certain form controls are used). I'm not sure how it would be any different to make it responsive than any of the html files you have as well.
Regarding routing, what's the motivation for wanting to drop WebForms routing and url redirection? You can get around it with Javascript if you want, but at that point you don't even need WebForms or a backend if you're also trying to get rid of the default.aspx page. Does the site only serve static content and doesn't need a database or server logic at all?
Well, first of all, those asp.net pages and menus ARE bootstrap, and ARE responsive.
You seem to be under the impression that aspx pages and web forms are somehow LESS responsive then HTML pages or some other frame work.
That is NOT the case.
In other words some act of magic does not exist or occur by jumping to MVC pages, or HTML pages.
You get ZERO advantages.
Even for asp.net web forms, bootstrap “responsive” pages has been the default for more then 10 years now.
So, you see this as a web form page (aspx), and NOTE the menu bar:
Ok, lets make the page smaller. we get:
And if we go even smaller, then the menu bar colipases to the familiar "hamburger" like this:
And the same goes even for a standard say grid.
Say we drop in a grid like this:
Ok, lets shrink down to mobile - menu bar goes to hamburger, and we get this:
So, I am not convinced that simply going to HTML, or MVC pages will help much.
To get a nice responsive and re-sizing web page?
The aspx pages seem to work and do as good as job as most frameworks. And the efforts to get similar or even better results?
I don't see much difference. You might want to give a particular example, but aspx pages based on good old web forms seems to do as good as a job as most choices these days. Out of the box, the menu and pages are bootstrapped, and they are responsive.
It takes extra effort, and some talent to lay out such pages, and make them work well for any frame work if the same page is to be mobile friendly all the way up to say a large monitor on a desktop.
I open to adopting a newer framework works better, but those better results are that of the developer choosing to lay things out better - not that by just magic we drop the aspx page and you as a result get a better mobile experience.
Say I have a product website, like Amazon (this is not the case, but it will help me explain my point), and I have a URL for every single product (such as with Amazon)...
Do I need to copy-paste and modify an HTML file for every single individual product page, or is there a way to use a "model" on which I can base all my other pages without recopying the whole code and modifying a few things in each?
I've just started learning HTML and web development, so bare with me if I'm asking a stupid question.
It just seems odd to me that a million-page website should host a million+ individual, nearly identical, HTML files.
Thank you very much in advance.
P.S. I'm using Amazon's brand name as an example here, and am not affiliated with anything related to it. Thank you for understanding.
No, you do not need an HTML file for every single page on your website. While you could do that, it is becomes very infeasible to manage the bigger your site becomes. On most websites you would have the following components:
A front end - consists of HTML code and usually some sort of template engine with placeholders for your data
A backend - consists of your data store (usually a database).
There will also usually be some form of API and/or middleware between your front end and backend.
If you go to https://example.com/myproductid in your browser, your computer will send that request to the web server. The web server will then retrieve your data, load it into the correct template, and serve the page to you.
In traditional HTML and PHP only websites, you would have to reload the entire page each time you went to a new product. However, you can instead use a technique called Ajax to only update certain parts of a web page rather than reloading the entire page. That way you can just update the text, images, and links that are specific to the product, and the rest of the page would stay the same. (Note: Ajax originally used XML, modern implementations usually use JSON).
Ultimately, you will want to learn some JavaScript and then start looking into various web frameworks or libraries such as ReactJS.
Not you Can have only one page for all product, but you have to make it Dynamic.
Yes you need an HTML document for your each webpage, like for Home page, contact us page you need different HTML documents
I’m designing a website with asp.net.
In my website I have many web pages.
All pages have a same header, and same menu, and same right menu bar, and others.
Note that the main data in each page is different from others.
For this, I copy the common HTML part of each page and paste it in new page!
Common parts like these:
div id=”headerDIV” style=… >
…
/div>
My problem is that how can I type these common parts of each page just one time and use it in all pages?
Without doing like this, I should change all pages when I wanna change a little thing in the header for example!
I think one way is to save the common HTML part in one .html file, and use it like this:
<!--#include file="header.html"-->
But, is it a best solution ?!
Isn’t it cause bad loading of the website especially for users with low speed Internet !?
Is there any better solution?
Thanks in advance.
If you are using razor you should learn how to use layout pages these pages contain the shared components that you are talking about. If you are not using razor then use master pages.
Razor is the latest view engine in ASP.NET so modern application will be more likely to use Razor and MVC, legacy software will be more likely to use Web Forms and Master Pages.
What your asking to achieve is simply implemented using a master page. Both ASP.NET WebForms as well as MVC support master pages in their own flavor. Master pages let you implement a common layout while including content sections to display individual page content.
I am converting mockups to HTML + CSS. Then this will be used as a template for a PHP system by other people (actually it can be any server side language, PHP is not important)
There are, for example, 10 different type of pages. But in each page, many blocks can differ in many cases. For example a block can be displayed differently for anonymous and logged in users. But I dont want to copy the whole html file and just change that block and have another html file. I know php can be written to include parts of the page from many files. But there is no php yet in my design workflow, and I want to have full HTML design before ever passing the files to PHP guys.
Basically, what I want is a "CASCADED" html structure for design purposes. So in a "container" html file, I can include all the different parts from different HTML files.
Does anyone know a method / tool / process to design dynamic pages?
I can think of two ways of accomplishing this. First pull in each of the various components on the page with ajax calls, jquery will make this relatively easy.
Or if you don't want to use javascript then iframes. But the iframes method is extremely prone to buggyness and in some layouts just will not work. Also keep in mind that since you aren't directly injecting html into the page each page would have to keep track of its own styles.
I've started learning ExtJS 4 and Sencha Touch 2, and i really like it.
The main difference between Sencha products and jQuery(& others) is that instead of enhancing preexisting HTML, it generates its own DOM based on objects created in JavaScript.
Apps developed like this are great as intranet apps, but can you create a consumer oriented website using Sencha?(like an online store)
I see that you don't write any HTML code in ExtJS or Sencha Touch so i am wondering how can fully generated Javascript page be indexed by Search Engines like Google. As i know, the Google Bot only sees the plain HTML code.
Is there anyway to SEO a Sencha WebApp?
Kind Regards,
Dan Cearnau
Nothing is impossible. You just need to do some work.
1. Generate standard static page using PHP or smth else. The page should look like the page of your ExtJS app. But all links must have GET params in URL. Also PHP should aggregate input GET params.
2. Add your ExtJS app to the page. In the app you have to take into an account GET params and make proper request.
2a. If a real user opens your page: PHP generates the output, then ExtJS app starts and hides the static page and generates the dynamic output.
2b. If a crawler opens your page so JS is disabled, PHP aggregates the request according to GET params and generates the output.
You can add params to URL like #param1¶m2¶m3 in ExtJS when clicking on links, so real users will be able to share their links. Just learn the router on PHP-side to understand URLs like this.
There is no way to make SEO-friendly pages using JavaScript only.
Using a full blown app it would be close to impossible to SEO. They are far too dynamic. Search engines work of indexing pages. They can deal with some Ajax stuff by supporting pages with #s but imagine how many pages a fully functional app will have. Every view you have has 100s of options that would constitute a new page, which also has 100s of options. All these virtual pages would most likely be just slight variations from other pages. different sort order, different filter, moved panel, search option.
If you use ExtJs to enhance a website like jQuery is often used, then that's a different story. You will have html for the spiders to read and then you enhance how the content works via javascript (see progressive enhancement).
Actually in Touch 2 you can define paths and use history support. This will treat sections of your app as actual pages in the browser w/ standard functionality like going back in the browser etc... this will be your best bet when working with mobile SEO
Getting any kind of SEO out of a Sencha app is impossible since it builds everything on the fly. Even if you use the history support in Sencha Touch, thats also done on the fly and has no effect on SEO.
For consumer-facing websites, Sencha is not the answer. For back-end (for maybe managing the shopping cart), its a different story.