Showing posts with label HTML. Show all posts

Wednesday, September 21, 2016

What is jsFiddle?

jsFiddle a nice tool to have, especially for web developers. It is a 'What you see is what you get tool that can do HTML, CSS and JavaScript. It can also access great many script libraries like, jQuery, Dojo, etc.

This is a must have tool if you are working on web pages. If you are a beginner or, one trying to learn web page authoring this is a great tool.

This is an online tool and therefore you do not need to install anything on your computer. You should have internet connection, though. .

You access this site https://jsfiddle.net/ and you get this displayed. All set and ready to go.

jsFiddle_00

You can test your HTML, CSS and JavaScript online with this tool

Test HTML:
In the HTML pane, just type this:

Welcome to jsFiddle

and click Run at the top.
Immediately you will see the result in the Result pane as shown.

jsFiddle_01

Add CSS and Test again:

Now I will style the text we just wrote by adding the style rule in the CSS pane (right of HTML). This is the rule I am going to add:

h1{color: Magenta;
text-align: center;
font-family: verdana;}

After typing in click Run and you will immediately see the change as shown:

js_fiidle_02

Add HTML fragment to place a button with the text 'Click me' as shown.
You should see the button on the document.

Write script for the button click:
Write the javascript code as shown which does the following:
When you click the button, the function test is run which should bring up the alert message.
The jsFiddle with button and JavaScript is as shown.

jsFiddle_03

When you click the button, you should see this:

Friday, April 15, 2016

What is DOM as related to the WEB?

DOM stands for Document Object Model. It is what the User Agent (for example a browser) produces in memory when it encounters an HTML Document .
An HTML document is really a text file with mark ups (using tags). Here is an example:

<html>
<head>
<title>About Me</title>
</head>
<body>
<h1>My origins</h1>
</body>
</html>

This is a tree of elements and some text.
The element looks like this:

 <element></element>

In the html document above, the elements are: <html></html><br /><head></head><br /><title></title><br /><body></body> 
The <html></html> elements contains the rest of the elements.The <head></head> element has the <title></title> element The <title></title>just contains a string

The <body></body> can contain many more elements.The above tree is how it would be seen by the browser to create a tree, the DOM tree or simply the tree.
The DOM tree not including the spaces and carriage returns is simply this:

In a practical example like a single page mobile app (which also follows the same principles asweb page) like this one in Intel the document may have a slightly different look, but the emulating browser as well as the device browser would evaluate the document based on this DOM tree shown here.

Thursday, May 29, 2014

What is a loose XAML file?

It is very similar to an HTML file that you create in Notepad and add it to your files/folders like this one:

Type in Notepad the following one line:

Hello, HTML

and now save it as TestHTML and save it as a HTML file (not the .txt extension) to your desktop. When you double click this file, your browser (IE perhaps) displays the following:

Hello, HTML
Sometimes it is also called a HTML fragment.

Likewise you can store a loose XAML file as shown:

Type the following in Notepad and save it as a file with extension .XAML to your files/folders.

http://schemas.microsoft.com/winfx/2006/xaml/presentation

" FontWeight="Bold">
Hello, XAML

Now open this file using IE (this is usually at C:\Program Files\Internet Explorer\iexplore.exe)

You will see the following:

Hello, XAML

For a loose XAML file you should havethe following:

•Contains only XAML (that is, no code).

•Has an appropriate namespace declaration.

•Has the .xaml file name extension.

Tuesday, February 18, 2014

How do you copy an ASP.NET website on one Hosting company to a site on another?

Sometimes you change your website hosting from one vendor to another. You want to transfer your site content from the old hosting provider to the new hosting provider. The general idea is the same but in this case we are considering moving from one ASP.NET hosting provider to another.

Domain Name:
First of all there is a consideration of domain name. You can buy a new domain name or you can use your existing domain name. In this case we are assuming that the existing domain name will be used and only the site content is moved.

Steps in moving to another:
1. Do not close the account with your old hosting provider as this may result in the loss of your content

2. Buy a new hosting account with the new hosting provider. If you are looking for a ASP.NET hosting you should choose one that hosts ASP.NET

http://www.findbestwebhosting.com/top10hostingcompanies.aspx/windows-web-hosting/1

Note: The above site was picked at random and the blogger has no interest in the above or any of the others that may get mentioned.

3. After you opened the account you will can get a temporary website (also an FTP site, email, etc. )Create your password for the various items (email, FTP, HTTP, etc.).

4. Download and install the free version of Visual Studio 2013 Express for Web (in this case Microsoft Visual Studio Express 2013 for Web). With this tool you can FTP your site content from the site on your old Hosting Provider to the temporary ftp site on the new hosting provider. The transfer itself may take considerble time depending on the amount of stored content.

After launching VS 2013 Express, clicking on File | Open Web Site... opens the following display.

Enter the ftp site of the previous hostings provider and enter your credentials.

The site contents will be displayed in the Solutions Explorer
Now the WEBSITE menu item gets displayed.

Click on WEBSITE and click Copy Web Site... as shown.

The FTP screen opens as shown.

In the above screen click on Connect, the connect to remote site is activated and the Open Web Site window is displayed again. Now enter the ftp site and credentials for the new hostings provider.

Both the source and target gets displayed as shown.

All that remains is highlight the items from your old site on the left(Source) to the target site using the arrows (watch directions) in between source and target.

The time it takes to transfer will depend on many factors that includes the network connectivity and the amount of data.

You may be wondering whether the new site created from the previous hostings site will function as it did earlier. This will depend on a lot of factors as the technology might have progressed and the elements (databases,user accounts, transacted items etc) may not be compatible versions. However you may be able to recreate most if not all of the features. Patience.

Before you make the ftp transfer you should have username and password for the old hosting account and the new recently purchased hosting account.

Also make sure,

You can ping both sites
Run tracert from the command window for the new hosting provider to make sure their router can be reached.
Make sure telnet is enabled in your computer.