I am working on a website for a company (my first, except of my own), and i am a little confused. i know that i knew this before, but i have forgot.
i am going to create many different pages on the site and i guess that it´s not a good idea to create one new file for each page.
and i think the best way is to make one "div" for each page, in the index file, and somehow put all of then behind each other, and show one by one when i click on the right thing in the menu... how do i do this?
can i only use CSS or do i need some Java script, and how do i write the code?
very thankful for quick help! :)
You're talking about making a single HTML page that contains all of the content for a company website. It's a bad idea to build a corporate website this way, for several reasons:
Web browsers expect to navigate through a site that has multiple pages, which is why they have a location bar and forward/back buttons. Your approach breaks both of those.
This single page would be much larger and take longer to load in users' web browsers.
The SEO of the page would be poor, because its content would be hard for Google and other spiders to understand semantically. A large page with so much text would look like keyword stuffing to Google and would be penalized.
It would be difficult to keep such a page organized; making any change to anything would require you to edit a single file, so it would be harder for you to track and/or merge changes to different documents, and much harder for the company to make content changes.
Lastly, the approach is just inappropriate. You are correct that it's not too great to create one static HTML file for every page. But the solution is not to make a single web page; the solution is to use a CMS!
Wordpress is the most popular CMS in the world. It's designed for blogs but can be used for any website.
Drupal is a powerful CMS with lots of features you may not need, but it's more modern than Wordpress and may be more visually flexible.
If you don't want to use a full-fledged CMS and you feel like flexing some programming chops, you could try using an out-of-the-box MVC framework like Rails or Django, but bear in mind that those will require you to learn a little Ruby or Python.
The main thing is that you should be using server-side templates to solve the problem you have, not client-side JavaScript.
(Some very large websites do use a JavaScript-powered approach to page navigation, but these are usually web applications like Twitter. The approach is inappropriate for a corporate web presence.)
You can use Javascript to change the innerHTML of elements.
For example, create a div and give it the ID "myDiv":
<div id="myDiv"></div>
Then, when the user clicks on a button you can change "myDiv"'s innerHTML like this (by calling the function):
function show(){
document.getElementById("myDiv").innerHTML="html code here";
}
I hope I helped :-)
Related
I just recently started learning javascript and have a question regarding the'proper use'. I'm still trying to identify the role of Javascript within a website, and I'm curious whether or not it would be considered ok to have Javascript modified the HTML of a web page.
Let's say I have a panel on a web page. This panel houses a list. I would like users to be prompted to add items to this list.
I was thinking that it would be possible to use Javascript to generate list items to add to the list. However, this would be modifying the actual number of HTML elements on the web page... For some reason, this just seems 'hacky'. When I think of HTML, I think of a static structure that should come to life with CSS and Javascript.
So my question: is it considered okay to have Javascript modify the HTML of a web page? What about the case of adding items to a list?
Thank you!
Javascript is a programming language designed so it can modify the document that is being displayed(the DOM), the actual HTML is never touched.
Javascript has a place on a website and modifying the document/dom is perfectly acceptable and without it, would make javascript almost useless. CSS is great for certain tasks, but you can't do everything in CSS, though CSS5 is coming pretty close for many tasks.
Rewriting the entire DOM IS bad practice, but using it to shift an element's position based on an action, or creating a popup overlay is perfectly acceptable.
Remember the gold rule:
Modify as little as possible to accomplish the goal.
What matters is the user's experience of the (HTML) document. The representation of "the document" can change by utilising a language like javascript that "manipulates the DOM" - and the DOM is like an instance of the HTML document, or "document session" if you will.
So in a way, no, the HTML is touched. It is positively manhandled by javascript - indirectly and in a non-persistent way. But if you want to be pedantic... we say it isn't and leave half the readers confused.
When to use javascript and when not to. It's swings and roundabouts. You need to learn (mostly from experience) when one particular tool suits the situation. It usually boils down to some core considerations:
HTML is for markup. Structure. Meaning.
CSS is for style, feel, appearance.
Javascript is for those situations where none of the above work.
And I'm neglecting to mention server-side processing with the obvious disclaimer that all processing that ought to be done in privacy is done on the server (with a programming language like PHP or Ruby for example).
Sometimes you get the grey area in-between where you can do something either way. Those situations you may ask yourself a question like... would it be processed quicker if the client (user's computer) processes it, or the server... and that's where experience comes in.
It depends on the case to decide if you should manipulate DOM directly or let the JS do it.
If you have a static html page, just do your html and hand craft the
DOM. There is no need for JS to get a hand here.
If you have a semi static html page where the user actions change
part of it - then get the JS to do the changing part.
If you have a highly dynamic html page (like single page app) - you
should get the JS to render html mostly.
Using plain JS however is not the best for you in this age of great JS evolution. Learn it -but also learn to use good libraries and frameworks which can take you to the track very fast.
I recommend you to learn Jquery and Angular 2 which make you feel like learning a super set of JS straightaway.
Short disclamer: Javascript may modify DOM content in a browser but never change original HTML served from Web server.
Modern Web is unthinkable without javascript. JS allows to make static HTML interactive and improve User Experience (UX). As any sharp tool JS can produce a masterpiece out of nearly dead page and cut throat to a blooming static content.
Everything is up to the developer.
When not to use JS
Do not use JS to deliver ever-green content to the page. Web bots (crawlers) don't run JS, and you message "I come to this world to testify to the truth" may appear "a voice of crying out of desert" and be non-indexed and thus unread.
When JS in the must
Every time your page visitor does something the page should respond with proper action (using JS or, if possible, just CSS).
This is especially important when a prospect fills in a form. To err is human so a developer via JS should help the visitor to make wrong things right. In many cases it is possible without requesting server and in even more cases the answer should come from the server. And JS is your best friend in this case.
Javascript never lives alone. Browser object is its trustful ally. Most modern browsers support XMLHttpObject A.K.A AJAX (you may remember this name from ancient Greek history) which communicates with the server without reloading the page.
The idea of AJAX which stands for Asynchronous Javascript And Xml is to send request and receive response from the server asynchronously without blocking page in the browser.
Native javascript may be difficult to understand to many beginner developers. To make thing easier there are a lot of JS libraries with jQuery being most known.
Returning to the OP's question, Should Javascript be used to modify HTML?
The answer is: It Depends.
I'm new on this whole web design business, and I am beginning to think I am going against good practices, so I had some questions.
I am making a website for a family company. We have a great deal of products that often change, and I need to make the site in a way that it will be editable by someone else less tech savy when I leave the company. My plan was to keep each product in an xml file loaded via javascript on each page. Later, I might attempt to write another script to make editing these xml files easy.
I am worried about two things. First, I am getting a sense that this is bad practice because some users disable javascript. Second, I am worried that search engines will not be able to find content on my site because all they will see is some template html and some javascript. I would like to be searchable and use good practice, but I have no idea how to solve the issue of dynamically changing content that is easy to edit in another way.
I would really appreciate if someone would point me in the right direction so that I know what I should be researching.
Thanks
RShom
There are many good free, open-source software products that let you create a customizable content management system (CMS). Drupal and Joomla are very popular ones.
Try searching for "free cms" and see what you find.
I bet you must have heard of PHP, even if you are not using it. I suggest you use PHP to parse your XML into HTML and present. Then your content will be searchable because PHP is server-side scripting. You are going to be using javascript, too, but it shouldn't be for the XML. It is to me for enhancement of a webpage (aside AJAX).
I've built a web site using jquery to make nice transitions between content.
The code works this way: there are 2 imgs (body and footer).
When I click on a link (instead of going to another page) I fade out the 2 imgs and change the src attribute of the 2. When the new imgs are loaded I fade them back in.
I'm using SWFaddress to allow user go directly to internal content.
Now I'd like to make my content indexed by google and other Search engines,
all the text content is inside the imgs, So I've got the text in ALT attribute.
My question is:
If a dynamically change the imgs ALT attribute using JS, will spiders be able to read it properly?
Consider that I'm using SWFaddress to create a sitemap.
Search engine robots generally do not process JavaScript. So no.
You're doing it wrong.
If you want a website with a lot of JS to be good for both bots and human without JS enabled (think of blinded people with screen reader for instance), you need to develop your website with content in text format and without any javascript.
Then you use high level JavaScript framework like jQuery to replace the content and change the navigation, form submission etc. as you want when the page is loaded (you know, the well-known $(document).ready(function(){/*...*/});.
This way you'll have the good parts of both worlds: "cool" animations and good accessibility (which means good SEO).
I'm not familiar with SWFaddress so my advice could be off.
But Googlebot will crawl and index some javascript. The same can't necessarily be said about Bing/Yahoo.
Google understands that sites are evolving and things like Flash and heavily used AJAX sites are popular, and to achieve their goal of "Organizing the World's Information", they need to get at it.
You can find information about Google's ability to crawl and index flash here: http://googlewebmastercentral.blogspot.com/2008/06/improved-flash-indexing.html
And more recently they talked about how they are crawling and indexing AJAX / XHR content when they're reasonably sure of the content: http://googlewebmastercentral.blogspot.com/2011/11/get-post-and-safely-surfacing-more-of.html
If you look at github they have a very slick AJAX experience, but as you navigate through the folders of a repo, it makes POST requests to get the additional XHR information. With the new Google crawling abilities, they should be able to more easily index github content without having to fall back to the non-HTML5 un-popstate experience.
But I would echo the other responses that you really should strive to make your site accessible to disabled users, which is more than just users using a screen reader. It sounds like you're doing that already, so kudos to you.
Bottom line, the AJAX content you're creating has a good chance of getting properly indexed, however, you might want to implement it in the way that Google's said they know how.
I'm creating a blog, but I need box-shadows for my boxes, so I'm asking the following.
Is it good to add shadows via a)images/css or b)javascript?
I've heard that lot of people don't have javascript enabled while browsing, so is there this a problem? It would be easier and simpler to create these shadows with javascript than adding a million divs and positioning them.
EDIT: I found this page: http://www.w3schools.com/browsers/browsers_stats.asp and it says that almoset every user has js enabled.
You could use JavaScript for your layout, but the general principal that you should keep in mind is that your HTML should be semantic: the elements on the page should have a meaning; it should project a structure that goes beyond the design of the page (although that structure can certainly be used as an indcator for the design aspects as well).
When this principal is applied, using JavaScript can help with providing the style you wish to project given the semantic meaning of the page.
Also, you should check your server logs (your hosting provider should have some sort of analytics tool/report available) which should tell you what browsers and versions are being used to visit your site. With that information, you can get a good feel for the people that you are currently reaching.
If you are using some sort of analytics package (e.g. Google Analytics) then you can possibly see the delta between two periods of time for the new visitors to your site as well, and try to gauge the capability of the browsers that new users will be using when they visit your site.
A few things to consider when using JavaScript to manipulate the DOM on the front end:
If you are using JavaScript to manipulate a good deal of the content, it's going to be a client-side process, and that can slow down the rendering of your page. You might want to consider a theme/template for your blog/cms which gives you the styling that you want and is rendered through CSS on the server-side.
Search engines do not execute your JavaScript. Because of this, you want to avoid manipulating the indexable content at all costs. You want your content to be embedded in the HTML as it is sent from the server. Using AJAX or other JavaScript to manipulate certain things is fine, but when it comes to your content, unless you are stylizing it, do not use JavaScript to manipulate it
Use CSS box-shadow for nice, up-to-date browsers: http://css-tricks.com/snippets/css/css-box-shadow/ (requires no extra markup)
And for most everyone else, serve up your js solution.
You should do it the easiest way for you and allow the page to degrade gracefully for those without JS (If you think you need to consider them, as today, I don't see any point in building none JS sites or building sites for no-js users).
This is an extension of an earlier questions I asked, here:
Django - Parse XML, output as HTML fragments for iFrame?
Basically, we're looking at integrating various HTML fragments into a page. We have an small web app generating little fragments for different results/gadgets, at various URLs. This is not necessairly on the same domain as the main page.
I was wondering what's the best way of including these into the main page? We also need the ability to skin the HTML fragments using CSS from the main page.
My initial thought was iFrames, however, I'm thinking the performance of this might not be great, and there's restrictions on CSS/JS manipulation of the included fragments.
Are SSI a better idea? Or should we use php includes? or JS? Any other suggestions? The two main considerations are performance of the main page, and the ability to style/manipulate the included fragments.
Cheers,
Victor
This sounds similar to what Facebook Platform applications do. One kind simply uses IFRAMEs, the other takes output from a backend and transforms it -- <fb:whatever> elements are expanded, JavaScript executed, and things like buttons are skinned. You could look at them for an example.
Using IFRAMEs would probably make things complicated. By default you cannot modify styles inside them from the outer frames, but you could probably use something like Google Closure's net.IframeIo to work around that.
I would try loading widgets using cross-domain scripting. Then you can add the widget's content to the page, however you wish, such as inserting it into the DOM.
iFrames should not be a problem performance-wise - It won't make a difference whether it's the browser doing the querying our your server. You may get design problems though.
SSI and PHP are more or less the same, but they both have the same problem: If the source page is down, rendering of the whole page is delayed.
The best thing performance-wise would be a cached PHP solution that reads the snippet, and is thus less vulnerable towards outages.
Funnily enough, I have written a PHP-based tool for exactly this purpose, and the company I wrote it for has agreed on publishing it as Open Source. It will be at least another four weeks, though, until I will get around to packaging it and setting up the documentation. Should that be of any interest to you despite the timeframne let me know and I will keep you updated.