I have a website that I need to convert to HTML5. I need advice and whether it can truly be converted to an HTML5.
Please tell me, how I should start? Should I just start using HTML5 code in lieu of existing HTML4.
I will need to later add video content and a image scroller. Also if need be, should I redesign the site from scratch? I dont think this should be a problem.
Also the site is not friendly with form factors other than deskop/laptop.
It does not work well with mobile small display for which case HTML5 is anyways needed.
Do not hesitate or think too much. I need to know what you guys have in mind before I take a major step. I need to do this in under a month, I cannot afford to waste anymore time on it.
I have used gimp to make the icons for this website, but i dont think much of those icons will be needed with the new code.
Also, should I make a design prototype in gimp for my website. Later on I can add the css/html5. Do you think its worth the extra time or should I use one of the ready made templates?
Yes any site can be converted in HTML5. It is simple process, first you have to change doctype from old to new which is very short doctype. Please change your doc type statement on top of site to following.
<!DOCTYPE html>
Meta coding also another thing you need to change from old version to latest which is following.
<meta charset="utf-8">
After changing your meta coding now see all div and change them to Semantics div. In past we used mostly div to separate part or to design our layout. Now try to see if some div have any specific meaning like header, footer, article, section and convert them accordingly. Only remaining div should for design purpose but all other who have specific meaning should be converted to tags which are provided by HTML5.
Now another thing need to be done is Nav, where ever you see navigation please put it in tag as html5 uses this tag to specify list of links.
When you do all this there is possibility that old browser would not support so to bring support back use add Shiv a javascript that bring these special tags in previous version of html. Now change your css as all div you change require redefining tag instead of div in css too.
As for your part of Mobile version or sizing it is not of HTML5 but it is about CSS you have to use media queries in css to customise different styles for different size. Media query will let you know what size of display is and than you have to add styles and do changes some big parts break in linear format to give perfect view in Mobile and Menu be removed and a button is added.
Now add video and other media but remember that different video formats are supported by different browser so you have to provide multiple format to be used in html5 video. Also have to use for compatibility purpose old flash.
GIMP you can use if you want to redesign or change design of site otherwise for html5 I don't see its usage.
You don't have to use GIMP to design everything from scratch, follow the steps described here:
http://www.w3schools.com/Html/html5_migration.asp
they will guide you to convert your existing website to use HTML 5
Related
I've built my mobile site using the jQuery Mobile UI but I now realize that I need some functionality to be different between it and my desktop site (datepicker dates should be longer on the desktop site, etc).
I've looked into Modernizr and matchMedia to help me load separate js files but I can't figure out a nice way for it to work responsively. Modernizr only works (unless I missed something in the doc) on the initial load and I'm having problems with matchMedia executing multiple times as it crosses the min/max-width threshold. It works sometimes but the trouble is in adding/removing the separate js files. On top of that (but not a huge issue - I don't think), Chrome fires off an error when loading scripts into the DOM from another script.
Would the best thing be to write one js file and then add a listener such as $.mobile.media("screen and (min-width: XXXpx)") to the body's width, changing my needed values?
I may be making this too hard for myself, or missing something obvious because I'm trying to keep HTTP requests and site size as small as possible, but I can't figure out a good solution for this.
Thank you!
Lightning Round Bonus Question: Is it good practice/proper to keep all of the jQuery Mobile styling (data-role data-id data-theme) after switching to the desktop site? It looks awfully .. awful for someone only viewing it on a larger screen.
IMHO, the best approach would be to introduce a couple of flags in your javascript, like "isMobile", "isTablet" or "isDesktop", that would be set within a method attached to the "pageinit" event of your webapp. Later on, you could check that flags to act accordingly with the proper version in the specific parts of your code.
The way you can check that flags depends on your architecture. In the project I am working right now, I extract that information from a class attached by the back-end on the body of the page, but that's because we have that info. You could try to use a library like Harvey to observe the media-queries that would be trigger, and set the flags accordingly. I don't think that your options ends here, but I am afraid I can't help you more!
I am reconstructing a massive collection of medical modules that were created in Flash. All of the modules are being redesigned for cross platform enjoyment (js and HTML5). I have been searching for a library or plugin that will add arrows(with rollover capabilities) and text above an image when the user clicks a button. I have had little luck.
The closest package I have found is Zoomify, but it's still not what I am looking for. They are asking for too much money for maximum development capabilities. I was really hoping to find a JQuery plugin or javascript library that would allow me to fully customize the interface. Here is a screenshot of an OLD FLASH module:
The red arrow corresponds to the link selected on the left. The new design is much more appealing but the underlying idea is the same, click buttons point to the objects.
If there is no such library or plugin should I create a simple javascript image viewer and store overlay coordinates in a database? Or is that overkill? I have hunderds of these things to do... maybe thousands :( Any help/direction would be greatly appreciated.
What you are asking for is provided by CSS, which enables one to place text directly on top of an image or other rendered HTML. The key CSS properties to investigate are:
position set to 'absolute'
values for at least two of top, right, bottom or left
use z-index to specifying layering/order
Lightbox is a good option "Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers."
I want to design a system where user can give a specific font size from a settings and whole site will be changed and every writing would be of that font size. Now i think I have to develop a browser plugin. however, if any of you can suggest that without using browser plugin i can do that, then definitely I want to know that. [ here user will be able to modify the site from the browser ,user has nothing to do with the existing sites coding what so ever]
Please don't develop a plug-in just for that.
Unless you're working with really old browsers (IE6 and such) that would not scale fonts specified in certain units, all modern browsers have menu and keyboard settings to change the font size. Let the users use those.
You can also use a bit of Javascript to display "bigger/smaller" buttons somewhere and either replace a stylesheet file or adjust the default font size of the <body> element and have the rest of the elements derive percentages from it.
I don't know about other way to do it,but anyway plugin won't help you.
See this excellent article: http://colonelpanic.net/2010/08/browser-plugins-vs-extensions-the-difference/
You mean a browser extension. As you can see in the article- if you want to write an extension to IE use BHO. For Firefox see https://developer.mozilla.org/en/XUL_School
What is the "best practice" (accessibility/usability-wise) for resizing text with Javascript?
My current solution is that for when the user clicks the resize link it adds an extra class to the body tag.
It also sets a cookie and then when the page is loaded - onLoad() - it reads the cookie and reapplys the body class tag again if needs be.
The only thing not ideal is that it loads then applys - the previous solution was to edit the CSS file before the page loaded but that threw up security warnings if the CSS file was in a different directory.
So, essentially is my solution reasonable or is there a better way?
Adam
What is the "best practice"
(accessibility/usability-wise) for
resizing text with Javascript?
Best practise is "Don't".
Specify the font size in relative units and let the native browser controls change it if the user wishes.
Attempts to duplicate this functionality rarely give the font sizes that users need (and usually end up offering a choice atomic, microscopic and tiny). Yes, some users need 72pt text (or larger).
The built in browser controls work on most, if not all, sites. You don't need to use up canvas real estate duplicating them.
Your solution sounds fine, with one addition: you can read the cookie as the page loads and add the class to the body element while the markup is generated. Most server-side languages support this: PHP, JSP, RoR etc.
Other than that, you have a solid solution.
Adding a CSS style to HTML via JavaScript
I think your suggestion is an excellent way of doing it.
It means you have the flexibility of being able to add the CSS class to any sub element rather than the body so that you can change the text size of a specific element if you so desire.
Reading the cookie on page load
To get around the issue you describe I would look for the cookie in your server side language (php/asp/ruby etc) and display the content as specified by the cookie on page load.
In PHP your CSS class definition may look like this:
echo '<div class=\"'.($_COOKIE['text_size']!='' ? $_COOKIE['text_size'] : 'normal'). '\">';
What is the "best practice" (accessibility/usability-wise) for resizing text with Javascript?
"Web Accessibility Gone Wild" sums it up quite nicely imho:
If your default font size may be too small for site visitors, then make it an adequate size.
and,
All browsers allow the sizing or scaling of the page content - why duplicate this browser functionality?
Also, Care With Font Size:
The problem here is a basic usability and accessibility issue: a good design should look good without requiring the user to enlarge or reduce the text size.
However, if you have a valid reason - feel free to ignore this.
I need to create a slide show of some images that can go full screen so it can be displayed via S-Video out.
The software is delivered via the web so a web-based option is needed.
The list of images is dynamic, and I would like to show them in order. The list of photos can change while the slideshow is running, and I would like to add the new photos to the slideshow.
I see two options:
Build it using JavaScript and then use a browser plugin to go full screen. I have a prototype of this, however it displays photos in random order.
Build it using Flash. I know nothing about Flash so I am looking for slideshows that can go full screen.
What would be best? Are there any good, customizable Flash slideshows?
For those interested, I ended up making an Adobe AIR application using HTML and JavaScript. Adobe AIR can go full screen and I was able to leverage the knowledge of HTML and JavaScript I already have. It has worked out pretty well, though there was a rather steep learning curve for the native AIR classes and how to use them.
If you're using Flash, SlideShowPro is a good option that you may recognize from sites like ESPN.
when you say "fullscreen", do you mean taking up ENTIRE screen? if so, javascript is not a tool to use, it must live inside the browser, so you will always have some chrome visible from the browser.
flash can do full screen, on the other hand.
Most browsers allow you to go full screen (even hiding the chrome) with the F11 key (requires user input). Then it's just a matter of scaling the image in javascript to the size of the viewport. If it doesn't exists, it could be written easily enough probably from a preexisting gallery script.
Also, this answer may be helpful
Hope that helps.