How to learn HTML5, CSS & jQuery?

[DennisTheMenace]

I am currently a classic ASP and VB.NET programmer...

I would like to learn how to use HTML5, CSS and jquery to access my SQL Server. The web pages will sit on an existing IIS Server and will be accessed by multiple means 1) a computer's browser, 2) mobile phones (both android and iOS) and 3) tablets (again, both android and iPad). These would be simple pages that request input such as a date or item id and look up information on an existing SQL Server.

Any suggestions for a good book to get my hands on that will get me started? Or even better - a step by step learning guide on-line?

Thanks in advance for your input!
-Dennis

=====================
Remember - YOU ARE UNIQUE!!!... Just like EVERYONE ELSE! ;o)

 

[vacunita]

I would like to learn how to use HTML5, CSS and jquery to access my SQL Server

The short answer is you don't.

HTML 5, CSS, and jquery are basically used to present the data and make interactions more comfortable for the user. In other words for the UI or interface design. However you still need a server side language to interact with the database and return the results to the client which are then presented to the user through HTML and CSS.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[FrankknarF]

Any suggestions for a good book to get my hands on that will get me started? Or even better - a step by step learning guide on-line?

For all three,

http://w3schools.com

should do nicely. HTML forms the bare contents of a page, CSS the make-up and jQuery does all sorts of things. However, you should first do the Javascript course, because jQuery is a Javascript framework. And there are plenty of things that you can do with pure ('vanilla') Javascript, without having to load a bulky jQuery library file. Good luck!

How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

 

[DennisTheMenace]

Thanks Frank!

I've used W3 to take a quick look at HTML5. I've played around with Java and JQuery but all about how it does fancy things to a web page. Their tutorials all point to presentation such as hide, fade, callback, etc.

I'm at a loss as to how to put it together to build a data rich website. In ASP.NET it all datagrids and bound text boxes - but not mobile friendly.

Again - thanks for the input Frank!

-Dennis

=====================
Remember - YOU ARE UNIQUE!!!... Just like EVERYONE ELSE! ;o)

 

[vacunita]

As I said, for data access you need a back end programming language, this can still be ASP. HTML, CSS and JQuery are all for presentation of said data.

I think your first step is to get to grips with what HTML and CSS can do for your presentation.

http://www.w3schools.com/html/html_intro.asp

From there you can move on to more complex things like interactions and animations using HTML5 and jquery.

And then marry it all with your backend programming lanuguage to get the data you wish to present.








----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[DennisTheMenace]

Thank you Vacunita. I did catch what you said. My issue is that I have no idea where to start to "marry it all" together as you put it.

I have found many tutorials on vanilla HTML5. Lots of Stuff on jQuery. And plenty of stuff on HTML5 and jQuery together. But none of it together with SQL.

So I understand HTML5. I understand jQuery for presentation and have played around with both. I currently use ASP and SQL. But now what? How do I nicely display a table of data from my SQL server - in HTML5 compliant format so it can show up nicely on a mobile phone or tablet such as a Droid, an iPhone or Nexus? How do I implement that using jQuery so I only need to refresh the one portion of the page that the user clicks/taps.

That is the kind of book, video, website or sample code that I was looking for.

Thanks again for everyone's input!
-Dennis

=====================
Remember - YOU ARE UNIQUE!!!... Just like EVERYONE ELSE! ;o)

 

[FrankknarF]

Getting data from an SQL data table into an HTML table goes something like this (PHP and HTML4):

<?php 
 // Connects to your Database 
 mysql_connect("your.hostaddress.com", "username", "password") or die(mysql_error()); 
 mysql_select_db("Database_Name") or die(mysql_error()); 
 $data = mysql_query("SELECT * FROM friends") 
 or die(mysql_error()); 
 Print "<table border cellpadding=3>"; 
 while($info = mysql_fetch_array( $data )) 
 { 
 Print "<tr>"; 
 Print "<th>Name:</th> <td>".$info['name'] . "</td> "; 
 Print "<th>Pet:</th> <td>".$info['pet'] . " </td></tr>"; 
 } 
 Print "</table>"; 
 ?>

To see how that would be done with ASP in stead of PHP, have a look at the last two examples on

http://www.html.net/tutorials/asp/lesson19.asp.

How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

 

[FrankknarF]

PS: the PHP code was taken from the tutorial on

http://php.about.com/od/phpwithmysql/ss/mysql_php_2.htm.

How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

 

[vacunita]

O.k. Lets put it this way. Once you know what you can do with one, and the other, what do you need from one to display what the other gives you.

I'm not too familiar with ASP, but I would guess it brings back your data in a recordset or resultset you can loop through.

You can then echo or print out the HTML necessary around your data to create the table, like Frank's example.

I believe what ASP does with datagrids, is ti creates the HTML for you.

How do I implement that using jQuery so I only need to refresh the one portion of the page that the user clicks/taps.

That would require Ajax or the jquery layer for ajax. In any case, you need to map out exactly what you want to happen when the user clicks, then write an ASP script that returns the refreshed data, and access it through Ajax. This may be a little too complex at this point, so perhaps getting the output in compliant HTML first would be a better idea.

Basically what you want to do, is think about how you would build the table manually if you were being given one cell at a time.










----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[1DMF]

Just to add my 2 pence worth...

You have already found a great source to learn how to do stuff - right here on Tek-Tips!

Once you have some code that you need help with simply head to the relevant dedicated forum and post a question.

There are a plethora of helpful, very skilled professionals who are always willing to help.

That's how I learned a lot of what I now know, be it Perl back end processing, HTML/CSS semantic and valid mark-up / styling, or client side functionality via JavaScript / AJAX / JQuery.

Once you break down your application into its constituent parts (kind of like MVC) , you can then build your web app combining the various technologies.

As Vacunita states, you still need some form of server side processing to handle user requests and return the relevant data be it ASP / PHP / Perl / Python / Ruby etc.. etc..

You then use HTML to mark-up the content of the view, CSS to style / design the view and JavaScript (Jquery) to interact with the client and the DOM (manipulate the view).

AJAX simply gives you a way to send requests to the server and return results to the client without requiring a new request client side (page refresh), and you can return any data structure you require from HTML / XML to JSON and everything in between.

Hope it helps

regards,
1DMF




"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

 

[MarkXaml]

The ASP.Net site has some good tutorials for you. They even have provided a video series for MVC via Pluralsight (link on the asp.net site off to the right). I've done the video series - it will touch SQL Server, HTML5 (only scratching the surface), and jQuery - along with code first entity framework, explains some NuGet stuff, some security, and some unit testing. It is in C#, though. Scott Allen (video author) is pretty good. All of the tools used in the video are free to obtain.

http://www.asp.net/mvc

Good luck!

-Mark