Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
My company is looking to create a page for an accreditation document which is several hundred pages long. There are about five sections, each with roughly 40-70 pages.
What do you think is the best way to handle navigation and display for this? Currently the only thing I've got in my mind is a simple nav window on the left that directs to iframes of each section's PDF and lets Adobe's table of contents manage navigation from there.
OR I could make each section in the nav a drop-down and each subsection a separate PDF (to reduce load times), but that feels clunky.
Large PDFs are nice as there is less page jumping, but they have awful load times. Small PDFs are nice for the fast load times, but awful with jumping around.
Any ideas would be appreciated. I'm left scratching my head on this one.
We've server-side pdf-to-png converters for that.
The webpage is loading page by page as png-image via AJAX while scrolling.
Works like a charm.
On the PDF side, make sure that your document is optimized for fast web view. This would transfer the first page plus all the overhead, and then only transfer the pages which are requested.
Conditions for that is that the server supports byteserving (something any kind of new webserver should be able to do), and that the PDF viewer component used to display the PDF understands about byteserving (the Acrobat/Reader component does, for example).
For the navigation, you could use bookmarks, which you make displaying in the document options of the document. With a good set of bookmarks, navigation through the document becomes rather easy.
It is big PDF. Navigation is fine but you want that user should not download the pdf and each time they have to read from site. Second case is when many users are not interested complete the PDF file, They may download/read particular section.
As per my view you should break PDF in smaller section and sections should managed by navigation links.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
How do large websites create so many webpages? Do they make a new .html file everytime they want a new page on their website? I read something about how links on these large websites arn't really pages but created in a database. If so how can I make a website with a database for webpages. Im trying to make a website that lets users download stuff but that would be a lot of .html files so whats the best way?
Templating.
Depending on the type of page you want to serve: home, section, article, etc... the server knows how to respond to different page requests.
If the header code and footer code repeats over multiple pages you include this partials in those different templates
Since your question is focused on websites havig N pages say for example a website with many products, the design for a product looks the same, so all you need is to instruct the server how to handle a specific route:
example.com
head
welcome
footer
example.com/products
head
allProducts (pagination etc)
footer
example.com/products/101
head
product<id>
footer
here the server detects that a request for a route has some ID after /products/, your backend logic should use the article (product template), go grab that product ID from the database (image, images, title, description, content, price etc) and populate such single template with that data - and send it to the client.
That way no matter how many products (pages) you have, you need only one HTML template.
SPA (Single Page App) follows the same principle, just updating the content with AJAX (no page refresh)
That depends on so much stuff ...
Sure you could have a separate html file for every page. Especially if you want to not be javascript dependent. Routing then happens trough the folder structure and you access every page separately by making a GET request on the specified address.
That's old-school. I think that kinda changed with PHP & Wordpress where a page skeleton is fed with data coming from the db and then that is displayed to the user.
Nowadays your backend feeds data to your frontend, usually through json format.
So the page you are visiting is the front end of a web app. The backend waits for a request which it then handles by serving the right data, if authentification is OK. All that is done usually with PHP or any other backend language and using a DB, SQL or NoSQL.
The front end is only one tiny html page with nice javascript which just replaces any element in the page like you want depending on what the dev' decided to.
That's Angular or Vue.js
Edit:
See Roko C. Buljan's answer
above. It answers it
more eloquently.
In the future, I will focus on answering the actual question being
asked.
I'm new here.
Great question. The requirements for the website you're trying to make moves past what static .html pages can provide.
Although from what I understand you are trying to build might be complicated to build from the ground up, as David mentioned frameworks would be the way to go. for example a nodejs/vuejs app (website) built with a 'stack' of programming tools present one 'view' (page) and change the contents of the page based on what actions the user takes.
Here are tutorials on:
nodejs - the server.
vuejs - the view and brains of your app.
MongoDB - your database you referred to for stack style apps.
These 'stack' types of apps (websites) cut down on all the document transfers of .html pages for the user to wait for and really increases speed and usability.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
A client just asked for a book-reading website with the following settings:
Must have a nav-bar with a menu and a background-music on/off button.
The menu are links to different content.
The content must change as users desire.
Here comes the tricky part:
If the background music it's ON, then the audio must play along even if the content changes (the only way I know to change the content is refreshing the URL but this also cuts the audio)
Is there a way to achieve this effect? with JavaScript or Jquery?
I really appreciate your help. If you post a simple JSFiddle I would be very pleased.
You will need to make a Single Page Application (SPA). This means you will have one .html file and use AJAX to load the contents of different pages into that file instead of having multiple .html files and reloading the browser. If you reload, the Audio WILL stop.
Here's what you need to do:
Learn the HTML5 Audio API. In other words, learn var audio = new Audio(src), audio.play(), audio.pause(), etc.
Learn how to make AJAX calls (a framework can help you make the AJAX calls. Easiest choice is jQuery)
Here's a demo app on Plunker: https://plnkr.co/edit/1Z1bdXXLcLn2h4TfkOQA?p=preview
Press the play button and change pages. Notice how the music continues to play while the pages changes.
Also, your server will need to be configured to send you the contents of the pages via AJAX so you can avoid having separate .html files for different pages and refreshing.
This is what Soundcloud uses for continuous playback. They use backbone.js, but any decent framework will do.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I published my first website and I am still trying to solve its problems. I have mainly two questions regarding my website:
I have published my website and it suddenly appears in Google, but not in the way I want. For example, my site is www.mysite.com, but in Google www.mysite.com/contact.html or www.mysite.com/blog.html come before the original website URL.
I would like my website to be displayed like a website. (Please, write envato on Google and you will see the first result. Main link is on the top, sub-links are below it). How can I achieve this?
There is not right way to appear in Google. Google decides in which order it presents your pages according to what it thinks is best for its users. You have no control on this. However, you can influence this by creating more backlinks to your preferred URLs and focus on its content too. Make it more valuable than other pages for example.
This is a SEO related question. Next time, it should be asked on Pro Webmasters.
Google will rank what they deem the most relevant result the highest. If they're ranking your contact or blog pages higher, chances are there's not much useful content on the home page.
You can't affect this. Google does it based on an algorithm, and only for sites where they deem it to be sufficiently useful.
Optimise your home page for the keywords / phrases for which related pages are showing. You cannot control what Google deems relevant as per their algo.
Re-optimise your inner pages (unwanted links) for related phrases. Building a site-map with proper hierarchy also helps.
Also, are your inner pages within sub-folders or in the open folder along with your index.html? Defining a proper 'folder-drill-down' bread-crumb also helps search engines in understanding page hierarchy and displaying it like so.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
There's a web design trend that I've been seeing more and more in sites I come across. The thing is, I don't know what it's officially called, so I don't know how to look for the topic in web design sites or blogs. I'd like to find tutorials and articles regarding tips and best practices, but I haven't found any and don't know what people are calling this design style.
Basically, it's having a long front page (or inside pages too) with lots of horizontal sections with big images and text. It's sort of like one-page sites, but it's not one-page. It's sort of like Parallax, but it doesn't really use the parallax effect (not necessarily at least). It also goes very closely hand-in-hand with responsive design, as it shares that long vertical format made for lots of scrolling.
A couple of examples of what I'm referring to: www.marketo.com, www.ginzametrics.com, www.kinhr.com
I'd appreciate any help finding the official name of this, if there's any, or also any related articles or resources. Thanks!
I believe the technical term you're looking for is single-page application or single-page interface.
Google search results for the phrase "single page website" show that it is used to describe the same types of sites. One page website comes up as another synonym (onepagelove.com provides a collection of single-page site designs, for example).
However, single-page application seems to be the most official and comprehensive term. Relatedly, it is actively used as a question tag here at Stack Overflow: https://stackoverflow.com/questions/tagged/single-page-application
They are "long page scrolling" designs. See: http://www.dtelepathy.com/blog/inspiration/long-page-scrolling-designs
A single page application is NOT the same as a "single page website". First of all, the difference between an application and a site is that a site is simply used to display information whereas an application provides a function or utility or service to the user. Applications are interactive by necessity. In addition, single page apps may have more than one "screen" or "view", but these views are loaded in via AJAX calls behind the scenes and do not require a page refresh. Examples of single page applications include Gmail and Facebook.
A single page website does not necessarily have a long page scrolling design.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I am involved in a project that is a real-estate listing site. The site has the ability to post advertisements, have static pages and also a blog. Since this could be easily implemented using WordPress which I have some experience with I proceeded with WP.
When functional the site might host hundreds perhaps thousands of active real-estate advertisements. We are using Permalinks. The advertisements are relatively static. Once posted would remain so. But the widgets will update the side bars with latest advertisements and posts.
QUESTION 1: My question is, is it OK to index the whole site. I ask this question because I came across some blog posts saying that indexing such listings is a bad idea. I also came with some blog posts saying to use Schema (for example to define 'Price', 'Rating' etc) when having such content.
QUESTION 2: I have CSS and JS that are page specific. At the moment I embed them in the header and thus pages not needing them also have to load them. I hear that modern browsers will cache these so it will not burden the web-server.
By accident I had put the 'link' to a CSS within the body tag of the HTML page and it worked without an issue. I am wondering if this is a bad practice.
Thanks in advance for your advice.
Question 1) It might be a better way of displaying the data and entering it for future use, but I doubt it would have any effect on SEO. It may be worth re-posting this question separate here:
http://wordpress.stackexchange.com
Question 2) You can use conditional formatting in your template files to load the CSS/JS on certain pages. e.g. Appearance -> Editor -> Header (header.php or whatever file name your template may use)
<?php
if(is_front_page()) {
echo "your custom CSS and JS here";
} ?>
That example is for the front page, but if it is another page try replacing that second line with: if(is_page('contact')) { where contact would be replaced with your page slug or id.
While loading the CSS in the body would work, it is bad practice as technically page elements could load before the CSS file is loaded. This could be an issue for older browsers.
Hope it helps,
Jeremy.