HTML5 basic invirement - javascript

I dont like it when i provide wrong information, so i need some information about HTML5.
I am not sure, but it seems to me that HTML 5 is just a new flat way of presenting things. They have improved things like CSS styling and video play back. And by the way, they call it HTML 5, but it is actualy JavaScript which does all the work. Please correct me if I am wrong, but this is what I can make of the whole HTML 5 area.
i posted this in a other topic, but i made a mistake confusing javascript with java, and it got deleted.
Ive learned some html5 and to me it realy looks like this way, all i see is Javascript doing the work.
Can someone clarifie this for me, it is important for me to understand this.

HTML5 is the new web standard, which includes:
a new document model;
different HTML syntax;
new controls, like audio, video, input type=range, color, etc;
old controls removed, like frame;
new javascript elements for History, Storage, IndexDB;
new layout rules;
and many, many more.
HTML5 is definitely not a javascript library or extension. Maybe you have just used the javascript functions.

To oversimplify:
HTML is structure
CSS add visual presentation
Javascript adds behavior
HTML5 is technically the latest version of the HTML specification. {HTML5, CSS3, JavaScript} together are known as the HTML5 stack.
There are 3 party components that can be hosted inside HTML to add additional structure, visual presentation and behavior, but you need plugins for them. Most common components are
Java applet, Flash player element and Silverlight instance. They are used because things you could do with old HTML stack was limited and new HTML5 stack was created to remedy that.
Main things for me at least that HTML5 adds
drag and drop support
new ways to store data on local computer to support Offline Web applications
<audio>, <video> and <canvas> to limit the need for 3 party components
New tags to write cleaner code and add ACCESSIBILITY support

I think what you're saying is that a lot of examples on the web claiming to showcase what you can do with HTML5 use a lot of javscript. This isn't wrong, but that's not what HTML5 is. HTML5 is the new iteration of HTML and has nothing to do with javascript. It does, however, make a lot of applications that you'd use javascript for easier by providing a richer environment for the javascript code to run in (like the canvas, or audio and video elements).

Related

What is the best way to embed a PDF in HTML?

I have a static site and I want to show some PDFs. The PDFs range from 6MB to 55MB. I was wondering what would be the best way to embed PDFs, in terms of loading speed, interface etc.
If there’s a solution that makes it possible for viewers to continue where they left off after they leave the site and come back, that would be nice to have, although I don't think I can code something similar myself, especially since the site is static.
A nice, lightweight option that requires no extra dependencies is the embed element. It’s built into the HTML spec, so you’ll enjoy pretty good support. I’ve used this in a project of mine where I need to display lots of on-the-fly rendered PDFs. (See project here of you’d like an example.)
From what I’ve seen, the embed element works pretty well on both desktop and mobile.
Do note that different browsers will display the PDF in slightly different styles. Firefox, for instance, will just download the PDF if the user has PDFs set to auto-download in Settings > Application. I think there’s a library called PDF.js that can give you more consistent results if you need really fine control over the PDF display.

Writing a custom widget set on top of canvas

I need to build a custom widget set on top of the canvas element. This is for a very specific problem domain (handling audio and text in an integrated fashion) so using an existing widget set is out of the question.
The resulting application centers around a Zooming User Interface on top of which our custom widgets are to be placed.
What are some standard approaches, pitfalls and design patterns to be aware of when writing a widget set from scratch?
I imagine that a lot of valuable experiences in this field will not be with the canvas element and HTML5 in particular since it's relatively young. But, of course, any answers that focuses specifically on canvas and javascript will get extra unicorn points.
I also imagine that a lot of experience in this field comes from rather heavy handed OO approaches. The GOF-book deals with GUIs extensively. To what extent are their approaches applicable in a more functionally oriented language like javascript?
Maybe I didn't satisfy your request, but I can share my experience in a similar developement with canvas and javascript.
I logically divide code in 3 parts (come kind of MVC of my scenario): initial setup with data collection, event listeners (mouse move, click, wheel etc), drawing functions. The architecture works well, as the fact that I don't have to modify it adding features.
I use the main common rules of programming as: good code design, document the code, don't do tricks (js offers a lot of tricks), test what you are doing.
I use javascript "as it is" with OOP, using singleton pattern (http://addyosmani.com/resources/essentialjsdesignpatterns/book/#singletonpatternjavascript); google closure library help me to document the code properly - because I need to compile it in advanced mode (https://developers.google.com/closure/compiler/docs/api-tutorial3) but even without any framework you can write good structured code in js.
So the answer to your final question is "yes, you can do it even in a poor structured language like js".
The main problem I found was test it, you can do only manually, I mean setup an automatic tool, for me was not enough.

Developing a simple web designer (drag + drop of text /w fonts and images)

I have a client who has requested I develop a simple web designer (ala CustomInk.com's t-shirt designer) which allows users to drag & drop text and uploaded images onto a canvas.
I have some ideas about getting started with javascript/jQuery but I wanted to ask SO: What is the most universally accessible way (in terms of browser support etc.) of developing an editor like this?
Does anyone have any advice/experience in the matter before I start fooling around blindly?
For cross browser support, your job will be much easier if you decide to use a Javascript library, such as jQuery. The big reason for this is because jQuery will encapsulate all of the difference between Javascript implementations between browsers. Writing this all from scratch is not really feasible.
So in your case, it sounds like you want users to select pictures and text, drag and drop them on a canvas of sorts. Then, what's your desired format for saving what they create? Are you trying to make a resulting image out of what they create?
To get started, I would check out jQuery UI. You can use the draggable and droppable functions for the front end, and when your users are done, you'll need to post the coordinates of their elements, text, and which pictures they're using, etc.
It seems like your biggest challenge is not making a pretty interface for this to happen, but instead, persisting what they create.
I've recently been working on something similar - you can check out the dev site here, and the js is not minified, so feel free to take what you want.
Initially I went for trying to 'render' the draft in SVG - this ended poorly, as browser support is still not that great, even using svg-web and similar libraries. I needed to do stuff like round text, and those features can really creep up on you.
In the end, I wrote a tiny python server (using CherryPy) that generates a png based on a set of querystring parameters using python-cairo. It takes serialized json object of 'text lines' and images. The png is actually the resource, and the function itself returns a 'render.png' filebuffer, so all you have to do on the front end is change the src attribute of the <img> tag and it will refresh. I added upload functionality to the "image processing" server, too.
Since I was already serializing json that contained all the information about the design, saving that in a database and loading it to edit designs was trivial.
I would definitely recommend a library like jQuery (which is what I used) to make development easier. I didn't manage to do much in the way of dragging/dropping, which is something I would probably try to do from the start if I was starting over. Feel free to email me if you'd like to see some of the back-end code or if you have any questions (my email is in my SO profile).
Jquery UI is the way to go, it provides drag and srop functionality and it's cross browser. Check it examples and documentations at http://jqueryui.com/demos/draggable/

Does HTML5 mean doing less with JavaScript?

Will browsers that use HTML5 use less JavaScript, jQuery, etc. and make things like animations done with just HTML? Will it make Flash less necessary for “smooth” graphics?
In other words, I won’t lose anything by taking the time to learn jQuery since HTML5 is here, will I?
In some specific places, yup:
The autofocus attribute is specifically designed to replace a common JavaScript pattern
CSS3 animations can replace JavaScript animations, so if we’re talking about HTML5 in the expanded Apple sense of the word, yup
But in general, I can’t see HTML5 diminishing the usefulness of JavaScript, nor frameworks like jQuery, one bit. Given that HTML’s development is constrained by browser releases, the best it can do provide markup alternatives to a few very common scripting patterns. Scripting is useful because it lets you do anything you can imagine, including things specific to the project you’re working on.
So learn away.
Well, it potentially can mean quite a lot more scripting. For example, where before you might have stuck a flash object into your page to display a chart or graph, that graphic might now be done using javascript drawing to a canvas. Overall I dont see the use of client side scripting decreasing, but rather increasing as web 'pages' become more and more complex. HTML5 will just provide even more possibilities.
HTML is about content. If you want to add behaviors to it you will still need JavaScript. Just like you will still need css to apply a layout.
Learning JavaScript will definitly be time well spent.
HTML 5 is ratifying the use of EMCAScript (a.k.a. JavaScript) to a degree that no prior W3C standard has done.
Some will say, in the future, that this was the harbinger of the decline of modern civilization.
In some ways, yes. This is especially true with regards to form elements. New input types are available, which include things like url and email. There are also min and max attributes, and a required attribute. These have the potential to greatly reduce the amount of work involved in building a front-end web form. Server-side validation will still be necessary, of course, but there will eventually be less need for duplicate code on the client side.
No. You still have to code fallbacks for browsers that don't support the HTML5 features you're using. The fallbacks will contain the same amount of Javascript code.

Is it recommended to use javascript to build layouts?

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).

Categories