tag:blogger.com,1999:blog-67184069398652229362024-03-16T20:51:59.565+01:00the web thoughtWeb development, web design and programming.Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.comBlogger402150tag:blogger.com,1999:blog-6718406939865222936.post-18307533010974171292013-04-23T07:00:00.000+02:002013-04-23T07:00:10.052+02:00CSS and HTML5: background image in buttonsWould you like to do something like:
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://4.bp.blogspot.com/-PtY2LSbqkYc/UW42LYOgB0I/AAAAAAAAAh8/DxHj_mq8-Uw/s1600/btn1.jpg" /></div>
<br />
Or maybe you prefer it another way, like:<br />
<br />
<style>
.btn {
height: 37px;
width: 37px;
background-image:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png');
background-repeat:no-repeat;
}
</style>
<br />
<div style="text-align: center;">
<button class="btn"></button></div>
<br />
<br />
They look the same, don't they? However they are a bit different in the making. Let's see how...<br />
<br />
The first way to do such thing is to use the <button> tag:<br />
<blockquote>
<code>
<button><br />
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" /><br />
</button></code></blockquote>
The image is just like any text we usually put inside the tag. <br />
<br />
<br />
<a name='more'></a>Yet there's another way, which uses background-images in CSS. I personally believe that it is a better way of handling the button.<br />
In the above examples, the first is an image (as you can see you can't click on it), while the second is live (it's an actual button you can click but that does nothing).<br />
<br />
In order to do it the second way, we need to create a short style, like:<br />
<blockquote>
<code>
<style><br />
.btn {<br />
height: 37px; <br />
width: 37px; <br />
background-image:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png');<br />
background-repeat:no-repeat;<br />
}<br />
</style></code></blockquote>
And then, we need to insert our button (assigning the related class) where we want to:<br />
<blockquote>
<code>
<button class="btn"></button></code></blockquote>
And that is all.<br />
<br />
Short post, for very very busy days. See you next time!<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com5tag:blogger.com,1999:blog-6718406939865222936.post-52956878509635341162013-04-18T07:00:00.000+02:002013-04-18T07:00:00.735+02:00jQuery: scroll to the top, to a specific container and to the bottom of a pageSome time ago I wrote an article where we discussed how to use <b>JavaScript </b>to create a <a href="http://thewebthought.blogspot.com/2012/06/javascript-smooth-scroll-to-top-of-page.html" target="_blank">smooth scroll to the top of the page</a>.<br />
Today we are going to see how to do it with <b>jQuery</b>, and we are going to do it in order to scroll to the <b>top</b> of the page and even to the <b>bottom </b>of the page. After that we are going to create a simple jQuery function that will scroll to a <b>specific element</b> of the page.<br />
<br />
Interested? Ok... follow me.<br />
<br />
<a name='more'></a><br />
<span style="color: #6fa8dc;"><b>Top and Bottom</b></span><br />
The code is very simple. First of all, include the jQuery library in the head of your document (this is valid for the second example as well):<br />
<blockquote>
<code>
<script type="text/javascript" src="yourPath/jquery.min.js"></script></code></blockquote>
After that, we create two links: one for the scroll-to-top, and one for the scroll-to-bottom. Remember to place them where you need them!<br />
<blockquote>
<code>
<a href="javascript:scrollToBottom()">Bottom</a><br />
<a href="javascript:scrollToTop()">Top</a></code></blockquote>
Now, again in the head of your document the jQuery script:<br />
<blockquote>
<code>
<script type="text/javascript"><br /> function scrollToBottom() {<br /> $('html, body').animate({scrollTop:$(document).height()}, 'slow');<br /> }<br /> function scrollToTop() {<br /> $('html, body').animate({scrollTop:0}, 'slow');<br /> }<br /></script></code></blockquote>
And we're done.<br />
<br />
<span style="color: #6fa8dc;"><b>Scroll to a specific point</b></span><br />
Now... if we need to scroll to a specific point on a page, we can create a target element, like a div:<br />
<blockquote>
<code>
<div class="scrollTarget">We will scroll to here</div></code></blockquote>
Now we insert the "void" link where we need the scroll to be triggered by a click:<br />
<blockquote>
<code>
<a href"javascript:void(0)" onclick="scrollPageTo('.scrollTarget', 15)">Scroll to div</a></code></blockquote>
We pass two parameters to the function: the first is our target and the "." or "#" is needed depending on the type of selector (class or ID) we used (in our case it's a class so "."). The second parameter is used to scroll to a position which is just 15 pixels above the target. The second parameter is optional, but it can be used to make the scroll as perfect as we need it.<br />
The function has to be place in the head of our document:<br />
<blockquote>
<code>
<script type="text/javascript"><br />
function scrollPageTo(myTarget, topPadding) {<br /> if (topPadding == undefined) {<br /> topPadding = 0;<br /> }<br /> var moveTo = $(myTarget).offset().top - topPadding;<br /> $('html, body').stop().animate({<br /> scrollTop: moveTo<br /> }, 1000);<br /> }<br />
</script></code></blockquote>
I must say I've found the above snippet somewhere a long time ago and I can't remember where. I'm sure I've used it more than once in web pages and I have surely modified it somehow.<br />
<br />
In any case, there we are.<br />
<br />
Take care and see you next time!<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com1tag:blogger.com,1999:blog-6718406939865222936.post-3718034250961801012013-04-16T07:00:00.000+02:002013-04-16T07:00:09.429+02:00ASP: pass a variable to JavaScriptOne of the most often asked question in forums is "how do I pass an <b>ASP</b> variable to <b>JavaScript</b>?"<br />
It is quite common to find out that people ask the question the other way round: "How do I pass a <b>JavaScript</b> variable to <b>ASP</b>?"<br />
Ok, the two things are completely different and they involve completely different solutions.<br />
<br />
First of all, let me explain something you might already know. ASP (or to be precise VBScript) is a server side language, while JavaScript is a client side language. The two work on different levels: ASP is executed before the page is completely loaded, while JavaScript works only after that. For that reason we cannot pass a JavaScript variable to ASP without reloading the page.<br />
<a name='more'></a><br />
Say that, if we need to convert a JavaScript variable to ASP, we need to pass it using the page URL and get the variable or use a form a submit an hidden value. Those are simple solutions, but - I must say - not really elegant solution.<br />
Let's see an example. The JavaScript part (to be inserted in the head of the document) could be something like:<br />
<blockquote>
<code>
<script language="javascript"><br />function GetHidden()<br />{<br />document.form1.action="http://YourPageName.asp";<br /><br />document.form1.submit();<br />}<br /></script></code></blockquote>
The HTML part could be:<br />
<blockquote>
<code>
<form id="form1" runat="server"><br /><a href="#" onclick="GetHidden();" >Click Here</a><br /><input type="hidden" id="txt1" name="txt1" value="ourTestValue" /><br /></form></code></blockquote>
And finally our ASP code:<br />
<blockquote>
<code>
<%<br />dim strVal<br />strVal=Request.Form("txt1")<br />%></code></blockquote>
What about the other way round: pass an ASP variable to JavaScript. Well, that is much much easier!<br />
Suppose our ASP variable is "ASPVariable" and our new JavaScript variable is "JSVariable", the JavaScript code would be:<br />
<blockquote>
<code>
<script language=javascript><br />var JSVariable = <%=ASPVariable%><br /></script></code></blockquote>
Simple as that.<br />
<br />
I hope you find the post interesting enough. Keep on following <i>the web thought</i>.<br />
<br />
PS: this is the 400th post! Wow, I couldn't believe it when I saw it. <div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com1tag:blogger.com,1999:blog-6718406939865222936.post-7543858474753019882013-04-11T07:00:00.000+02:002013-04-11T07:00:07.211+02:00CSS: create a post-it noteI've recently needed to create some sort of post-it note for a web site. The general look of the homepage was like a working desk, and it was suggested to add a yellow post-it somewhere in the upper right corner of the viewport.<br />
Because I know that time is money and that we don't really need to reinvent the wheel, I have collected some solutions I've found on the web.<br />
If you're interested, please keep on reading.<br />
<br />
<br />
<a name='more'></a><a href="http://webdesignandsuch.com/create-a-post-it-note-with-css3/" rel="nofollow" target="_blank">Create a Post-it Note with CSS3</a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://webdesignandsuch.com/wp-content/uploads/post-it-with-css1-575x272.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Post-it" border="0" height="151" src="http://webdesignandsuch.com/wp-content/uploads/post-it-with-css1-575x272.jpg" title="Post-it" width="320" /></a></div>
<br />
<a href="http://mentormate.com/blog/css-postit-note/" rel="nofollow" target="_blank">The 100% CSS Post-it® Note</a><br />
<link href="http://fonts.googleapis.com/css?family=Reenie+Beanie" rel="stylesheet" type="text/css"></link>
<style>
.postit {
color: black;
text-align:center;
width: 275px;
margin: 25px;
min-height:175px;
max-height:175px;
padding-top:35px;
position:relative;
border:1px solid #E8E8E8;
border-top:60px solid #fdfd86;
font-family:'Reenie Beanie';
font-size:22px;
border-bottom-right-radius: 60px 5px;
display:inline-block;
background: rgb(255,255,136); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(255,255,136,1) 77%, rgba(255,255,214,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(77%,rgba(255,255,136,1)), color-stop(100%,rgba(255,255,214,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* IE10+ */
background: linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */
}
.postit:after {
content: "";
position:absolute;
z-index:-1;
right:-0px; bottom:20px;
width:200px;
height: 25px;
background: rgba(0, 0, 0, 0.2);
box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
-moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
transform: matrix(-1, -0.1, 0, 1, 0, 0);
} </style>
<br />
<div style="background-color: white;">
<div class="postit">
Hello everybody!<br />
This is not an image!</div>
</div>
<br />
<a href="http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/" rel="nofollow" target="_blank">Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5</a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://d2o0t5hpnwv4c1.cloudfront.net/771_sticky/step5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Post-it" border="0" height="218" src="http://d2o0t5hpnwv4c1.cloudfront.net/771_sticky/step5.png" title="Post-it" width="320" /></a></div>
<a href="http://onwebdev.blogspot.com/2011/04/css-post-it-note.html">CSS: post
it note</a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://dev.css-zibaldone.com/onwebdev/post/postit2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://dev.css-zibaldone.com/onwebdev/post/postit2.jpg" width="185" /></a></div>
<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-5520214960241650252013-04-09T07:00:00.000+02:002013-04-09T07:00:05.456+02:00Ms Access: database administratorToday I would like to share something that I've found a long time ago (exactly around 2008). The thing is I still find it useful today while at that time it has saved me in critical situation a lot of times.<br />
It is called <b>DBAdmin</b> and I think you should have a look at it if you administer <b>MS Access</b> databases over the internet.<br />
<blockquote class="tr_bq">
"StP Database Administrator (DBAdmin below) is a tool that allows you to manage your MS Access databases through your browser, providing various set of functions you can perform with your databases, without having downloading them, changing and uploading again. Most of features needed for database management are included, you can even create a new blank databases on-line."</blockquote>
The things you can do with DBAdmin are incredible and because we don't really want to download-change-upload our mdbs wasting time, the tool is a perfect companion.<br />
<br />
Have a quick look at the <a href="http://blog.stpworks.com/archive/2008/04/30/database-administrator-for-ms-access.aspx" rel="nofollow" target="_blank">tool page</a> and let me know what you think. <br />
<br /><div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com2tag:blogger.com,1999:blog-6718406939865222936.post-40123924612153300142013-04-04T07:00:00.000+02:002013-04-04T07:00:07.564+02:00CSS: rotate background imagesWe can use <b>CSS </b>to <b>rotate </b>elements in a web page. You may already know about it, but a friend of mine asked me how to rotate a <b>background image</b>, without rotating the container.<br />
Hmmm... that was a question, but the answer surprised me when I found how to do it.<br />
Are you interested? Well, get into the article and see how to do it.<br />
<a name='more'></a><br />
<span style="color: #6fa8dc;"><b>The basics</b></span><br />
As said, we can rotate a container using transform: rotate. Just consider that you element has a class="myContainer". We can rotate it by using a rule like:<br />
<blockquote>
<code>
.myContainer<br />{<br /> -webkit-transform: rotate(30deg);<br /> -moz-transform: rotate(30deg);<br /> -ms-transform: rotate(30deg);<br /> -o-transform: rotate(30deg);<br /> transform: rotate(30deg);<br />}</code></blockquote>
<br />
With the above we rotate the container by 30 degrees.<br />
<br />
<span style="color: #6fa8dc;"><b>To rotate or not to rotate?</b></span><br />
We can now consider the above and decide to rotate only the background image inside the container, or to rotate the container but not the image inside it.<br />
Ah! Is it possible? Yes, it is.<br />
<br />
Let's see how to rotate the image but not the container.<br />
Considering the above container (class="mycontainer") we can apply any rule to it, but we have to position it in a relative way and hide the overflow.<br />
<blockquote>
<code>
.myContainer<br />{<br /> position: relative;<br /> overflow: hidden;<br />}</code></blockquote>
Now we need to create a pseudo element, position it absolutely with a transformed background:<br />
<blockquote>
<code>
.myContainer:before<br />{<br /> content: "";<br /> position: absolute;<br /> width: 200%;<br /> height: 200%;<br /> top: -50%;<br /> left: -50%;<br /> z-index: -1;<br /> background: url(bckImage.jpg) 0 0 repeat;<br /> -webkit-transform: rotate(30deg);<br /> -moz-transform: rotate(30deg);<br /> -ms-transform: rotate(30deg);<br /> -o-transform: rotate(30deg);<br /> transform: rotate(30deg);<br />}</code></blockquote>
Note that we need to set the z-index to -1 in order to make it appear below the container.<br />
<br />
What about a fixed background with a rotated container?<br />
We need a pseudo element again. But first we need to rotate the container:<br />
<blockquote>
<code>
.myContainer<br />{<br /> position: relative;<br /> overflow: hidden;<br /> -webkit-transform: rotate(30deg);<br /> -moz-transform: rotate(30deg);<br /> -ms-transform: rotate(30deg);<br /> -o-transform: rotate(30deg);<br /> transform: rotate(30deg);<br />}</code></blockquote>
Ok. Now we use the pseudo element and we "counter-rotate" the background. Ah! That's the trick!<br />
<blockquote>
<code>
.myContainer:before<br />{<br /> content: "";<br /> position: absolute;<br /> width: 200%;<br /> height: 200%;<br /> top: -50%;<br /> left: -50%;<br /> z-index: -1;<br /> background: url(bckImage.jpg) 0 0 repeat;<br /> -webkit-transform: rotate(-30deg);<br /> -moz-transform: rotate(-30deg);<br /> -ms-transform: rotate(-30deg);<br /> -o-transform: rotate(-30deg);<br /> transform: rotate(-30deg);<br />}</code></blockquote>
And that's it.<br />
<br />
<span style="color: #6fa8dc;"><b>Compatibility?</b></span><br />
All the above works perfectly in IE9, Firefox, Chrome, Safari and Opera. We have little trouble with IE8: the transformation is not working, but the background will appear.IE6 and IE7 don't know anything about pseudo elements, so nothing will be applied.<br />
<br />
Let me know what you think about the examples, as usual, using the comments section below.<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com6tag:blogger.com,1999:blog-6718406939865222936.post-76594227906515006962013-04-02T07:00:00.000+02:002013-04-02T07:00:00.407+02:00jQuery: calendar and datepicker plugins<a href="http://2.bp.blogspot.com/-pNA026bYyIM/TJyU791fuxI/AAAAAAAAACM/KXSX3TDY1yc/s1600/jq.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://2.bp.blogspot.com/-pNA026bYyIM/TJyU791fuxI/AAAAAAAAACM/KXSX3TDY1yc/s1600/jq.jpg" /></a>Holidays time - short post. I hope you find it useful.<br />
Now on with the <b>calendar </b>and <b>datepicker jQuery plugin </b>parade!<br />
<br />
<a href="http://www.webappers.com/2010/06/08/wdcalendar-jquery-based-google-calendar-clone/" rel="nofollow" target="_blank">wdCalendar – jQuery Based Google Calendar Clone</a><br />
"wdCalendar
is a jquery based google calendar clone. It cover most google calendar
features. User can choose to have a daily view, weekly view or monthly
view. User can easily create, update or remove events by drag &
drop. It is very simple to to integrate wdCalendar with a database.<br />
wdCalendar is free (open source LGPL license), easy to use, and with great functionalities."<br />
<br />
<a href="http://www.codfusion.com/blog/page.cfm/projects/event-calendar" rel="nofollow" target="_blank">Event Calendar</a><br />
"Event Calendar is a jQuery and ColdFusion event calendar that works a
lot like the Google Calendar system. With Event Calendar, you can share
calendar information throughout your organization. There is also a
simple user facade, that you can extend, to help control user rights."<br />
<br />
<a href="http://bugsvoice.com/applications/bugsVoice/site/test/calendarPickerDemo.jsp" rel="nofollow" target="_blank">jQuery.calendarPicker</a><br />
"This component is a light-weight calendar/date-picker.
<br />
Some features:
<br />
<ul>
<li>supports internationalization (supports do not necessary means it is implemented:-) )</li>
<li>supports changing current date</li>
<li>supports mouse wheel scrolling</li>
<li>supporting (deferred) callback on date selection</li>
<li>supports variable number of years, months and days</li>
<li>supports next/prev arrows"</li>
</ul>
<br />
<a href="http://www.eyecon.ro/datepicker/#about" rel="nofollow" target="_blank">Date Picker - jQuery plugin </a><br />
"Date Picker component with a lot of options and easy to fit in your web application."<br />
<br />
<a href="http://arshaw.com/fullcalendar/" rel="nofollow" target="_blank">FullCalendar</a><br />
"FullCalendar is a jQuery plugin that provides a full-sized,
drag & drop calendar like the one below. It uses AJAX to fetch
events on-the-fly for each month and is easily configured to use your own feed
format (an extension is provided for Google Calendar). It is visually
customizable and exposes hooks for user-triggered events (like clicking or
dragging an event).
It is open source licensed under an
MIT license."
<br />
<br />
<br />
<a href="http://keith-wood.name/datepick.html" rel="nofollow" target="_blank">jQuery Datepicker</a><br />
"A jQuery plugin
that attaches a popup calendar to your input fields or shows an
inline calendar for selecting individual dates or date ranges."<br />
<br />
<a href="http://www.overset.com/2008/05/12/multiday-calendar-datepicker-jquery-plugin/" rel="nofollow" target="_blank">Multiday Calendar Datepicker JQuery Plugin</a><br />
"Multi-day, multi-month animated datepicker jQuery plugin that weighs in at 14KB with the uncompressed development version."<br />
<br />
<a href="http://code.google.com/p/jquery-frontier-calendar/" rel="nofollow" target="_blank">jQuery Frontier Calendar </a><br />
"Full month calendar jQuery plugin that looks like Google Calendar."<br />
<br />
<a href="http://jqueryui.com/datepicker/" rel="nofollow" target="_blank">jQuery UI datepicker</a><br />
<br />
<a href="http://tympanus.net/codrops/2012/11/27/calendario-a-flexible-calendar-plugin/" rel="nofollow" target="_blank">Calendario</a><br />
"Today we want to share a flexible calendar concept with you. Calendars
can be a very tricky thing when it comes to their layout and
responsiveness. This is an experiment for trying out some grid layouts
that can be applied to calendars. We’ve created a jQuery plugin for the
calendar itself and you can see some examples of how to use it in the
demos. The aim is to provide a suitable layout for both, small and big
screens and keeping the calendar structure fluid when possible. On large
screens we want to show a grid-based layout while on smaller screens,
we want to simply stack the days of the month."<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-17429671282522561872013-03-31T00:30:00.000+01:002013-03-31T00:30:00.035+01:00Happy Easter<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-qtXOc9j7jp0/UVQzKCgPn8I/AAAAAAAAAfQ/cjHQoU_RAp8/s1600/happy_easter.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="http://4.bp.blogspot.com/-qtXOc9j7jp0/UVQzKCgPn8I/AAAAAAAAAfQ/cjHQoU_RAp8/s640/happy_easter.jpg" width="640" /></a></div>
<br /><div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-3990651937850326872013-03-28T07:00:00.000+01:002013-03-28T07:00:09.663+01:00Relational databases: some simple rules (part 2)This is the second part of the two parts article "Relational databases: some simple rules".<br />
<br />
In the first part we have seen the ideas of tables and the way we can relate them.<br />
And now... the conclusion!<br />
<br />
<span style="color: #6fa8dc;"><b>Primary and foreign keys</b></span><br />
We now need to move on a bit, but please keep in mind the example made in the first part of the article: two tables, with a relation for the state column.<br />
The names table has the following columns: ID, name, surname, address, post code, city, state.<br />
The states table has the following columns: ID, state.<br />
In the persons table, the “state” column will contain only IDs related to the states table.<br />
The ID column in the person table is a primary key. The ID in the state table is a primary key.<br />
The “state” column in the persons table is a foreign key.<br />
Quite easy, isn’t it?<br />
<a name='more'></a><br />
<span style="color: #6fa8dc;"><b>And next? Queries</b></span><br />
Following the above ideas, we can start to build our new database. Usually, we start from creating tables structures and then we fill them with records. But after that? How can we use the information stored in tables?<br />
In <i>the web thought</i>, we have seen many ways of using data stored in a database. We can use different programming languages in order to query our data, however the query commands and the resulting recordset is what really matters.<br />
We cannot here list all the commands available in each environment used to query database. It is important here to consider that the basic rules always apply. There are many query builder around the web, and many tutorials that explain how to query a database, however we basically need to point to a table – or a set of related table – and fetch the data we want.<br />
Once we have the information, we can show it and interact with the records. In fact we have different kind of queries: we can select records if we need to show them (possibly in a ordered form); we can update a table, delete records or insert a new record. All those operations (among others) are made using queries. So, if tables are the core of a database and relations are the way tables work together, queries are what we need in order to interact with records contained in tables.<br />
There are in fact other ways we can use when we need to work on records contained in tables. In SQL Server for example we have views and stored procedures. However for the purpose of this article we are not going to see them. If you’re interested, <i>the web thought</i> has many articles which can guide you on the use of SQL Server queries, stored procedure, functions etc (just use the search section, please).<br />
As a general rule, building queries is an easy job. Creating an efficient query is far more difficult (specifically in complex queries). What I suggest is to create the query in the its simpliest form and then work on it in order to make it faster and more efficient.<br />
<br />
<span style="color: #6fa8dc;"><b>Conclusion</b></span><br />
This two parts article was conceived because a friend told me to do simple tutorials on different subjects. One of them was the idea behind a relational database. <br />
Writing about it isn’t really easy and being precise and short is a real challenge. As you may know there are hundreds of books (from “for dummies” to “for experts”) about it, and I surely don’t have the conceit to be a real expert. I’ve been creating and using relational databases since around 2000. Nobody taught me what I know... or – to better say it – many people on the internet have taught me what I know today. The rest is basically experience. But surely if I could have found an article like the above, surely I would have understood some basic rules which should be always taken into account when designing a relational database. I hope you have found the two articles interesting enough.<br />
<br />
As usual, please use the comments section below if you want to share your thoughts.<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-61450594495012384412013-03-26T07:00:00.000+01:002013-03-26T07:00:10.607+01:00Relational databases: some simple rules (part 1)It doesn't matter what we prefer to use, either Ms Access or SQL Server or Oracle, or even MySql, but when we want to create a new database, we really need to consider its structure, plan it and finally create all the database elements.<br />To do such a thing might seem easy – and in general it is – but a good development plan is what we need to avoid pitfalls and future issues with the structure of the database. The complexity of a database is surely one of the things to be considered, in fact it is clear that a more complex database will surely be more complex to develop.<br />Some simple rules can be taken into account and in this two parts article we are going to see some important points we need to keep in mind when planning a new database.<br />
<a name='more'></a><br /><span style="color: #6fa8dc;"><b>Tables</b></span><br />When building a new database, the core of it will be a set of tables. Tables are made of rows and columns: each row consists in a record, each column defines the information contained in a row.<br />For example a list of persons could have columns like: name, surname, address, post code, city, state etc.<br />In each row we will have the actual information like: John, Smith, 22 Acacia Avenue, 12345, London, United Kingdom. “John” is a value of the column “name” and stays in a field. All the information in a row consist in a record. <br />Think it as grid with column names: the actual records stay just below the column names. <br />Now let’s take a big step ahead.<br /><br /><b><span style="color: #6fa8dc;">Relational database</span></b><br />Allow me, please, to stress out a bit the relational database concept, because it is very important. <br />In order to simplify the concept we can make a simple example. Consider the persons table above. It’s a list of persons with the respective home address. We know that, for example, we are going to repeat the city or the state people live in for each record. Let’s say we have a list of 10000 names, then we are going to have 10000 cities and states. Just as an exercise, we can create that list and see how many times the very same city or state appear in the main table. That means, for example, we can create a second table with just the list of all the cities and relate it to the first table. That will decrease the number of information in the first table... but how?<br />Ok, we need to understand that more deeply.<br />In the first example we need to create another column which will be always the first column we create in a new table: the ID column.<br />The ID column contains a unique identifier for the record: every single record will a unique number which will identify it without any doubt. IDs help us a lot when we need to query tables and if used with indexes can speed up queries and make them more efficient. But in our scenario and the purpose of this article, we need IDs for other reasons. <br />Our persons table will have 10000 records and columns like: ID, name, surname, address, post code, city, state.<br />As said, because we have 10000 records, we will surely repeat at least cities and states quite often, especially if our list is related to a specific and not too wide area like Europe. Consider that in the world there are – more or less – 196 countries and that there are 193 countries which are members of the United Nations. As you can imagine, in our persons table we are going to repeat the country a lot.<br />Another step: the size (in terms of disk usage) of our table is obviously related to the amount of data we have in it. The more record we have, the bigger the size will be. More information (in terms of characters in words) we store, bigger the table will be.<br />In large databases, table size is important for different reasons and not only in relation with disk usage: the bigger the table, the slower the query. IDs and indexes can help us, but relations can be just the perfect choice.<br />In fact, we can create a new states table with just two columns: ID and state. If we want to consider all the 193 states, we can put them all. In the persons table, the state column will not contain the state anymore, but the ID of the state table.<br />I don’t want to get into a long discussion, but if you stop for a moment and think of that new architecture, you will surely understand that it will save a lot of space and the size of our persons table will decrease by a significant amount in terms of size and disk usage.<br />AH! We have created our first relation between the persons table and the states table.<br />The above can be done in different situations, and tables can have multiple relations. In the above scenario, we could create a cities table (if it makes sense). However, if you imagine a complex database, you can definitely imagine many situations where a relation is needed.<br />That is the solid idea on which we must build our databases. That should always be our first rule, written in stone on our desk. Every time we create a new table we must think about how we can split it, how we can create relations and how we can save CPU and disk usage with relations.<br />
<br />
Next time the second part of the article.<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-5158953701856286232013-03-21T07:00:00.000+01:002013-03-21T07:00:05.846+01:00CSS3: border-imageWith <b>CSS3 </b>we can use <b>images </b>as <b>border </b>of an element. Apart from using the normal border styles already available in CSS, we can now make our web pages more colourful and attractive (if you really like colours and shapes!).<br />
Just to go directly to the core, we can use the following style for, let's say, all divs in a document:<br />
<blockquote>
<code>
div<br />{<br />-webkit-border-image:url(myborder.png) 30 30 round;<br />-o-border-image:url(myborder.png) 30 30 round;<br />border-image:url(myborder.png) 30 30 round;<br />}</code></blockquote>
The border-image property is in fact a shorthand property. As you can see from the above example, we are using different values which are:<br />
1) border-image-source which is the path to our image;<br />
2) border-image-slice which is the inward offsets of the image;<br />
3) border-image-width which is the widths of the image;<br />
4) border-image-outset which defines the portion of the image that goes beyond the box;<br />
5) border-image-repeat which sets the way the image will be repeated.<br />
<a name='more'></a><br />
Before exploring further the above, we should consider that all the values, if omitted, are set to the default values. Apart from the first (the source) which can't be obviously omitted, the default values are - in order: 100%, 1, 0, stretch.<br />
<br />
The border-image-source property has a simple syntax:<br />
<blockquote>
<code>
border-image-source:url(pathToTheBorderImage.png);</code></blockquote>
If the image is not found, or it is set to none (which is absurd in any case), the border-style property is used. That means we can use the border-style as fallback for not supporting browsers (see below).<br />
<br />
The border-image-slice property has values as a percentage, number or "fill". Percentages, relative to the image itself, represents the width for horizontal offsets and the height for vertical offsets. When using numbers we are referring to pixels in a raster image and vector coordinates in a vector image. "Fill" preserves the middle part of the image.<br />
I know it seems quite complicated and I believe it is. We should consider some sort of grid, dividing the image in 9 regions: the 4 corners, the 4 edges and the middle. The middle part is treated as transparent (unless we use "fill"). We are setting values for the other 8 parts of the image. Values follow the rule that if they are omitted they are the same as the previous value.<br />
<br />
The border-image-width works the same way as the border-image-slice property. The only difference is in the "fill" value which is "auto" in this case.<br />
<br />
Just a note at this point: please follow me to the end of the post and consider the information I'm giving as just... well. information.<br />
<br />
The border-image-outset property determines - as said - the number by which the image extends beyond the border box. That is on each side (top, right, bottom and left).<br />
<br />
Finally, the border-image-repeat can be set to "stretch" (the image fills the area), "repeat" (the image is tiled) and "round" (the image is tiled but if it doesn't fill the area, the image is rescaled).<br />
<br />
As you can there's plenty of possible values to be set, which gives us a lot of freedom but here comes the bad news: compatibility!<br />
<br />
The 5 different properties listed above are not really working on any browser to my understanding. The only way to use border-image is to use the shorthand property as described in the first example.<br />
<br />
But, my friend, there's still a quick solution. If you really want to use border-image you can always rely on a border-image generator like this <a href="http://border-image.com/" rel="nofollow" target="_blank">one</a>.<br />
<br />
And in the future when we will have full support, we might need to fully understand how to properly use all the available properties to create interesting borders.<br />
<br />
Please share your experience on the matter by using the comments section below!<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-89043846001907671352013-03-19T07:00:00.000+01:002013-03-19T07:00:03.499+01:00ASP: conditional statements with If...Then...Else...ElseIfIn <b>ASP </b>we can use <b>conditional statements</b> in different ways. The basic syntax we are used to, is <b>If</b> ... <b>Then</b> ... <b>Else </b>... End, however we will see that there are some interesting things about it.<br />
<br />
First of all let's consider a simple conditional statement in ASP. As you already know, we do not use any brackets or parenthesis. A basic example could be:<br />
<blockquote>
<code>
<%<br />Dim numVar<br />numVar = 5<br />If numVar = 5 then<br /> response.write("The variable numVar is 5")<br />End if<br />%></code></blockquote>
<br />
<a name='more'></a>The above is just checking if numVar is equal to 5. If so, the text is output ("The variable numVar is 5"). Otherwise, nothing happens. It's obvious that the example will always output something, because 5 is always equal to 5.<br />
Moreover, we must remember that in ASP we cannot set a value of a variable inside the conditional statement. The use of the operators (like "=") inside a conditional statement is always used only to compare two values, variables and values or variables and variables.<br />
<br />
If we need to create a more complex conditional statement, we can introduce "Else". That means we can check if a condition is met, but if it's not we can decide what to do. What stays after the "Else" is what's happening if the first condition is false.<br />
<blockquote>
<code>
<%<br />Dim numVar<br />numVar = 5<br />If numVar = 6 then<br /> response.write("The variable numVar is 6")<br />Else<br /> response.write("The variable numVar is " & numVar)<br />End if<br />%></code></blockquote>
The first condition is clearly false and the first response.write will be ignored, while the second will be executed.<br />
<br />
We can create nested conditional statements, but believe me, in many situations, they can create strong headaches. We normally prefer to use a conditional statement at the time, however there's something more.<br />
<br />
We can check multiple conditions using "ElseIf" which is a new conditional statement, depending on the first conditional statement.<br />
Let's try to simplify it by using simple words:<br />
<i>If </i>something is true <i>Then</i> do this <i>ElseIf</i> second something is true <i>Then</i> do this etc. Obviously we cannot use an "ElseIf" not "contained" in an If statement.<br />
Let's see an example:<br />
<blockquote>
<code>
<%<br />Dim numVar<br />numVar = 5<br />If numVar = 6 Then<br /> response.write("The variable numVar is 6")<br />ElseIf numVar = 5<br /> response.write("The variable numVar is 5")<br />Else<br /> response.write("The variable numVar is " & numVar)<br />End if<br />%></code></blockquote>
As you may notice, the above code will always output "The variable numvVr is 5".<br />
<br />
I think that a good use of ElseIf can be very beneficial to our code, especially when we need to check different variables for multiple values.<br />
If you have used it in special and interesting ways, please share your thoughts in the comments section below.<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-11887360956857182452013-03-14T07:00:00.000+01:002013-03-14T07:00:05.308+01:00HTML5: geolocation<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://1.bp.blogspot.com/-wWXyAfUe3_g/TcONY_PrmbI/AAAAAAAAAG8/Kt19KCQXb30/s200/HTML5_Badge_64.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="150" /></div>
With <b>HTML5</b> is now possible to use the target browser in order to determine the <b>location</b> from which the user is accessing the web. It is not, as you may understand, a GPS location (unless the user is surfing from a GPS capable device), but it can be quite interesting in some cases where special services are supplied on a web page.<br />
<br />
How can we develop a geolocation service on our web page?<br />
<br />
Well, first of all try and see the final effect: go <a href="http://html5demos.com/geo" rel="nofollow" target="_blank">here</a> and enjoy. After that, please get back on <i>the web thought</i>...<br />
<br />
First of all let me say that all location services on the target browser must be granted by the user. As you may have noticed by visiting the above live example, the browser has asked you permission for the use of location services (unless you've granted permanent access to your location).<br />
<br />
<a name='more'></a>But how is it working?<br />
Well, this time is not just a line of code. In fact, we need to use a little snippet. Everything's working around the geolocation API.<br />
Let's see a complete example:<br />
<blockquote>
<code>
<button onclick="getLoc()">Where are you?</button><br /><div id="errMsg"></div><br /><div id="map"></div><br /><script><br />var x=document.getElementById("errMsg");<br />function getLoc()<br /> {<br /> if (navigator.geolocation)<br /> {<br /> navigator.geolocation.getCurrentPosition(showPos,showErr);<br /> }<br /> else{x.innerHTML="Geolocation not supported by this browser.";}<br /> }<br />function showPos(position)<br /> {<br /> var latlon=position.coords.latitude+","+position.coords.longitude;<br /> var img_url="http://maps.googleapis.com/maps/api/staticmap?center="<br /> +latlon+"&zoom=14&size=400x300&sensor=false";<br /> document.getElementById("map").innerHTML="<img src='"+img_url+"'>";<br /> }<br />function showErr(error)<br /> {<br /> switch(error.code)<br /> {<br /> case error.PERMISSION_DENIED:<br /> x.innerHTML="User denied the request"<br /> break;<br /> case error.POSITION_UNAVAILABLE:<br /> x.innerHTML="Location information not available"<br /> break;<br /> case error.TIMEOUT:<br /> x.innerHTML="Request timeout"<br /> break;<br /> case error.UNKNOWN_ERROR:<br /> x.innerHTML="Unknown error"<br /> break;<br /> }<br /> }<br /></script></code></blockquote>
The script itself is quite easy to understand, but I will here explain some important things:<br />
1) the two divs at the beginning of the above snippet are used to show possible error (errMsg) and the resulting map (map);<br />
2) the getLoc() function is used to determine the geolocation;<br />
3) the showPos() function is actually showing the map by inserting it in the div with id="map";<br />
4) the showErr() function is replacing the innerHTML of the div with id="errMsg" with a possible error message (something went wrong).<br />
<br />
If you spend a little time on studying the above script, everything will be quite clear.<br />
What about compatibility? Well, all the latest version of all the available browser are supporting geolocation. Good news eh?<br />
<br />
If you like, you can share your thoughts by using the comments section below. If you don't want... well.. don't.<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-88437135884706603582013-03-12T07:00:00.000+01:002013-03-12T07:00:06.961+01:00CSS: cursorAs you surely already know we can change the <b>cursor </b>type using <b>CSS</b>.<br />
They way we do it is very simple. It is enough to use the cursor property and apply it to any element in our web page:<br />
<blockquote>
<code>
<style><br />.myDiv {<br /> cursor: crosshair;<br />}<br /></style><br /><div class="myDiv">The cursor here has a crosshair shape</div></code></blockquote>
<br />
What are the different option we have?<br />
The answer after the break :-)<br />
<br />
<a name='more'></a><br />
In order to see the different effects, please move your cursor on the appropriate cursor type in the following table.
<br />
<style>
td {
border: thin solid #FFFFFF;
}
.a { cursor: auto;}
.b { cursor: crosshair;}
.c { cursor: default;}
.d { cursor: e-resize;}
.e { cursor: help;}
.f { cursor: move;}
.g { cursor: n-resize;}
.h { cursor: ne-resize;}
.i { cursor: nw-resize;}
.l { cursor: pointer;}
.m { cursor: progress;}
.n { cursor: s-resize;}
.o { cursor: se-resize;}
.p { cursor: sw-resize;}
.q { cursor: text;}
.r { cursor: w-resize;}
.s { cursor: wait;}
.t { cursor: inherit;}
</style>
<br />
<table><tbody>
<tr><td><i>URL</i> URLs to custom cursors. The live test won't work obviously.</td>
</tr>
<tr>
<td class="a">auto</td>
</tr>
<tr>
<td class="b">crosshair</td>
</tr>
<tr>
<td class="c">default</td>
</tr>
<tr>
<td class="d">e-resize</td>
</tr>
<tr>
<td class="e">help</td>
</tr>
<tr>
<td class="f">move</td>
</tr>
<tr>
<td class="g">n-resize</td>
</tr>
<tr>
<td class="h">ne-resize</td>
</tr>
<tr>
<td class="i">nw-resize</td>
</tr>
<tr>
<td class="l">pointer</td>
</tr>
<tr>
<td class="m">progress</td>
</tr>
<tr>
<td class="n">s-resize</td>
</tr>
<tr>
<td class="o">se-resize</td>
</tr>
<tr>
<td class="p">sw-resize</td>
</tr>
<tr>
<td class="q">text</td>
</tr>
<tr>
<td class="r">w-resize</td>
</tr>
<tr>
<td class="s">wait</td>
</tr>
<tr>
<td class="t">inherit</td>
</tr>
</tbody></table>
<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-12623368670075690412013-03-07T07:00:00.000+01:002013-03-07T07:00:01.078+01:00HTML5: telephone numbers on web pagesEvery day on TV we hear news saying that most of the people in the world is surfing the web using a mobile device. You are probably reading this very article with your iPhone or Galaxy, or maybe using your favourite tablet.<br />
As many of the above mobile devices are actually capable of making phone calls, we can insert <b>telephone numbers</b> on web page and make them <b>clickable</b>, so that any mobile user will be able to use the link to call the shown number.<br />
<br />
<br />
<a name='more'></a><br />
<br />
The way to do it is quite simple. In fact we can use a normal <a> tag with the <i>tel </i>protocol:<br />
<blockquote>
<code>
<a href="tel:+XX0123456789">Click to Call +XX0123456789</a></code></blockquote>
Consider that instead of XX we need to put the country code (for example 39 for Italy). That is because our web page will be seen by people all over the world and not only from our country.<br />
<br />
At the same time it is possible to pause the dialling by inserting <i>p</i> characters (each <i>p</i> a delay of one second). We can use <i>w</i> characters when we need to wait for a tone.<br />
<br />
When we are browsing the page from a desktop computer, the link will not appear as clickable, unless the pc itself is ready to make phone calls through specific software.<br />
<br />
As we use the <i>tel </i>protocol, we can use the <i>fax</i> protocol for fax numbers.<br />
And last but not least, Skype uses the <i>callto </i>protocol, so we should be careful and use a way to detect the user agent and propose one or the other protocol according to the user device.<br />
<br /><div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-11307537822911581532013-03-05T07:00:00.000+01:002013-03-05T07:00:04.635+01:00SQL Server: compare tablesWhen we import, export or synchronise tables, it's a hard job if we have many records. <br />
In the past, I've found some difficulties when I need to <b>compare</b> two tables in <b>SQL Server</b>.<br />
The tables contained different records and I needed to consolidate them in the first table.<br />
The first thing I wanted to do was to actually see which were the differences: I needed a list of records in order to understand the situation.<br />
I've found a good solution for that, and let me say, a quite unexpected solution indeed.<br />
<a name='more'></a><br />
The UNION operator works quite well if we need to compare two tables. It's quick and handles NULL values, while a join clause or a WHERE condition don't.<br />
Assume we have two tables and we need to get all differences in both. The magic trick I've found is to GROUP the union query on all columns and count all columns. The count is working because for any not completely matched record in any GROUP BY clause column, the COUNT(*) will be 1. Exactly what we are looking for.<br />
<br />
Ok, now let's see an example: two tables (tabA and tabB) containing three columns (ID, Col1 and Col2).<br />
The UNION query will be:<br />
<br />
<blockquote>
<code>
SELECT MIN(TableName) as TableName, ID, Col1, Col2<br />FROM<br />(<br /> SELECT 'tabA' as TableName, tabA.ID, tabA.col1, tabA.col2<br /> FROM tabA<br /> UNION ALL<br /> SELECT 'tabB' as TableName, tabB.ID, tabB.col1, tabB.col2<br /> FROM tabB<br />) tmp<br />GROUP BY ID, col1, col2<br />HAVING COUNT(*) = 1<br />ORDER BY ID</code></blockquote>
The query will return all records from one table that don't completely match in the other. Moreover, it returns all records that don't exist in one of the two tables.<br />
Just to be clear, the query returns records that<br />
1) are not present in tabA, but are present in tabB;<br />
2) are present in tabA, but are not present in tabB;<br />
3) all rows that do not completely match all columns.<br />
<br />
The above trick is quite different from a way to compare two table and insert the missing data from one table to another.<br />
In this case we need to consider an example.<br />
Two tables: tabA and tabB. Each table has two columns: ID and name.<br />
We need to add to tabA, all the missing names that are in table tabB. That means, compare tabA with tabB, if the record exists in tabA, do nothing; if the record doesn't exist in tabA, add it.<br />
The query will be:<br />
<blockquote>
<code>
INSERT INTO tabA (name)<br />SELECT name<br />FROM tabB<br />WHERE name NOT IN (SELECT name FROM tabA)</code></blockquote>
And that's it.<br />
<br />
I hope you've found the above interesting enough. Just drop a line in the comments section below.<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-48151498037167602912013-02-28T07:00:00.000+01:002013-02-28T07:00:01.436+01:00JavaScript: how to use external filesAs we already know, because we saw it in the past here on <i>the web thought</i> or elsewhere, we can use <b>JavaScript </b>snippet by placing the code in the head and/or the body of our documents.<br />
However, it's good practise to create <b>external JavaScript files</b>, especially when we use standard functions all over our web site.<br />
<br />
In this short article, we are going to see how to do it.<br />
<br />
<a name='more'></a>Creating our own JavaScript library is not that difficult. <br />
What we basically want to do it here is: create an external .js file, embed it in our page and finally use a function from the external file.<br />
<br />
Let's create the .js file.<br />
To do so, we create a new file in the root of our web site. Like creating a new txt file, but with a different extension; we name the new file <i>myJs.js</i>. Open it with your favourite web editor and place the following code inside it:<br />
<blockquote>
<code>
function popUp() {<br />
alert("Hello from the web thought")<br />
}</code></blockquote>
Ok. Save and close the <i>myJs.js</i> file.<br />
<br />
Now open a new html document and place the following snippet in the head section:<br />
<blockquote>
<code>
<script src="myJs.js"></script></code></blockquote>
In the body of the document, just insert the following snippet:<br />
<blockquote>
<code>
<input type="button" onclick="popUp()" value="Click here!"> </code></blockquote>
Just open the newly created html file with your favourite browser. The effect will be that when we click the button, an alert will popoup as expected.<br />
<br />
The magic is basically done by embedding the <i>popUp()</i> function inside the web document by using the src="fileName" in the head of our document itself.<br />
<br />
Just remember:<br />
1) we use external files when we need to use specific functions all over the web site. Doing so we don't need to write the functions in every document;<br />
2) we do not use the <script> tag inside the .js file: we just put the functions one after the other;<br />
3) we can use external .js files to be placed in the head of our documents and even to be placed in the body of our documents (the script will be run when the page loads).<br />
<br />
And that is all for today.<br />
Hoping that I will find the time to write again next week...<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-24700753225137227142013-02-26T07:00:00.000+01:002013-02-26T07:00:05.195+01:00jQuery: menu plugin and ideasIf you want to create menus using <b>jQuery</b>, here is a good list of <b>plugins and ideas </b>to consider.<br />
<br />
<a href="http://dipi-graphics.com/labs/6/NavDock-jQuery-Plugin.html" rel="nofollow" target="_blank">NavDock jQuery Plugin 1.2</a><br />
"NavDock is a jQuery plugin that transforms your menu into a dock style menu." <br />
<br />
<a href="http://www.tn34.de/projekte/downloads/jQuery.tn34.facets.html" rel="nofollow" target="_blank">jQuery.tn34.facets </a><br />
<br />
<a href="http://rezoner.net/labs/jorbital/" rel="nofollow" target="_blank">jOrbital menu</a><br />
"Group objects with similar functionality into one button.
Save space and give users more interaction. Move your mouse over the share button to see what I mean."<br />
<br />
<a href="http://www.myjqueryplugins.com/jquery-plugin/jmenu" rel="nofollow" target="_blank">jMenu : Horizontal navigations with unlimited dropdown sub-menus</a><br />
"<b>Menu is a jQuery plugin</b> that enables us to create horizontal navigations with unlimited sub-menus.
<br />
Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown).<br />
The markup of the menu is pretty clean as it makes use of nested lists.<br />
The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible."<br />
<br />
<a href="http://codecanyon.net/item/drop-menu/81289?ref=1stwebdesigner&ref=1stwebdesigner&clickthrough_id=111673082&redirect_back=true" rel="nofollow" target="_blank">Drop Menu</a><br />
"With this script you can make nice and interactive drop down menus. The
advantage of this script is that it not only gives you the ability to
make list drop down menu. You can also use a div as drop down element."<br />
<br />
<a href="http://www.htmldrive.net/items/show/199/jQuery-and-CSS3-Awesome-Slide-Down-Box-Menu.html" rel="nofollow" target="_blank">jQuery and CSS3 Awesome Slide Down Box Menu </a><br />
"we will create a unique sliding box navigation. The idea is to make a
box with the menu item slide out, while a thumbnail pops up. We will
also include a submenu box with further links for some of the menu
items. The submenu will slide to the left or to the right depending on
which menu item we are hovering."<br />
<br />
<a href="http://designindevelopment.com/css/apple-navigation-with-css3/" rel="nofollow" target="_blank">Apple Navigation with CSS3 </a><br />
"Apple is known for very clean design and if you have been to their
website in the last few years you’ve seen their primary navigation. It’s
a staple of the apple website and today I wanted to take a crack at
recreating the Apple navigation using CSS3 techniques." <div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com2tag:blogger.com,1999:blog-6718406939865222936.post-30297958487498125182013-02-21T07:00:00.000+01:002013-02-21T07:00:03.003+01:00CSS: LayersWe can use <b>CSS </b>to <b>overlap </b>elements on a page. We are talking about putting one element on top of another.<br />
To do so we can define the <b>z-index</b>. Something like:
<style>
.a {
position: relative;
top: 30px;
left: 5px;
z-index: 2;
background-color: #330000;
}
.b {
position: relative;
z-index: 1;
background-color: #FF0000;
}
</style>
<br />
<div class="a">
Maecenas vel commodo magna. Aliquam facilisis, erat eu rhoncus elementum, elit eros venenatis risus, vitae tincidunt dui lorem a tellus. Integer non magna a mi euismod ultricies. Aliquam sit amet tortor est. Vivamus sollicitudin neque et justo vestibulum dignissim.
</div>
<div class="b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum tincidunt turpis vitae rhoncus. Donec massa enim, fringilla nec vestibulum at, congue hendrerit dolor. Integer rutrum volutpat condimentum. In consequat ornare erat, ac condimentum diam molestie ac. Nullam ligula lacus, posuere vel rhoncus at, ullamcorper eget lacus. Etiam non nisi urna. Vivamus elementum orci sed diam rhoncus vitae pharetra dolor commodo. Vestibulum varius cursus orci nec ullamcorper. Curabitur nulla sapien, laoreet eu convallis ac, luctus in tellus.
</div>
<br />
<a name='more'></a>It's very simple and the effect can be interesting in many situations.<br />
<br />
The way it is done: two divs with different classes (a and b).<br />
<blockquote>
<code>
<div class="a"><br />
Maecenas vel commodo magna. Aliquam facilisis, erat eu rhoncus elementum, elit eros venenatis risus, vitae tincidunt dui lorem a tellus. Integer non magna a mi euismod ultricies. Aliquam sit amet tortor est. Vivamus sollicitudin neque et justo vestibulum dignissim.<br />
</div><br />
<div class="b"><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum tincidunt turpis vitae rhoncus. Donec massa enim, fringilla nec vestibulum at, congue hendrerit dolor. Integer rutrum volutpat condimentum. In consequat ornare erat, ac condimentum diam molestie ac. Nullam ligula lacus, posuere vel rhoncus at, ullamcorper eget lacus. Etiam non nisi urna. Vivamus elementum orci sed diam rhoncus vitae pharetra dolor commodo. Vestibulum varius cursus orci nec ullamcorper. Curabitur nulla sapien, laoreet eu convallis ac, luctus in tellus.<br />
</div></code></blockquote>
Then we need to style those two divs:<br />
<blockquote>
<code>
<style><br />.a {<br />position: relative; <br />top: 30px;<br />left: 5px;<br />z-index: 2;<br />background-color: #330000;<br />}<br />.b { <br />position: relative; <br />z-index: 1; <br />background-color: #FF0000;<br />}<br /></style></code> </blockquote>
The b div will stay on top of the a div because of the z-index.<br />
Basically when we need overlapping elements, the z-index property can be set to
determine the order in which elements overlaps. The greater the
z-index value the more the element will be placed in front. If no
z-index value is set, the last positioned element in the normal html
flow will be positioned in front.
<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-84801498912184481992013-02-19T07:00:00.000+01:002013-02-19T07:00:03.748+01:00ASP: CDate<b>CDate </b>is an <b>ASP </b>function that converts a valid date and time string to a Date Type value and returns it.<br />
<br />
Because of the above we need to use another ASP function in order to be sure to convert a valid date. The function's <b>IsDate</b>.<br />
<br />
In the following short post, we are going to see how to use both functions and create a short script that converts a date.<br />
<br />
<a name='more'></a>First of all, let's talk about the <a href="http://thewebthought.blogspot.com/2011/04/asp-is-this-date-isdate-function.html" target="_blank">IsDate</a> function. Because it uses the local settings to determine if a date is really a date, we should be careful when using it. For example, if we think about a date containing "April" as month, we should remember that the fourth month is not called "April" in all languages.<br />
Because of that, remember to verify the language setting of your system.<br />
<br />
The CDate function has a simple syntax:<br />
<blockquote>
<code>
CDate(Date)</code></blockquote>
where Date is a valid date expression. We can use functions like Date() or Now() as well.<br />
<br />
Now, let's put the two aforementioned functions all together.<br />
<blockquote>
<code>
<%<br />
Dim myDate, myDateType<br />
myDate = "April 18, 1920"<br />
If IsDate(myDate) Then<br />
myDateType = CDate(myDate)<br />
Response.Write(myDateType)<br />
Else<br />
Response.Write("Bad date formatting!")<br />
End If<br />
%></code></blockquote>
which will output:<br />
<blockquote>
<code>
18/04/1920</code></blockquote>
or<br />
<blockquote>
<code>
4/18/1920</code></blockquote>
depending on the date and time setting of the hosting system.<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-10725916126761004362013-02-14T07:00:00.000+01:002013-02-14T07:00:06.827+01:00JavaScript: innerHTMLIn the following short post, we are going to take advantage of <b>JavaScript </b>and its <b>innerHTML </b>method.<br />
<br />
Every DOM element can be manipulated using JavaScript. With the use of jQuery we can do great things, but if we need to do something more basic, it is probably better to use JavaScript directly, without the help of the aforementioned great library.<br />
<br />
We can manipulate any DOM element using its id as selector together with <a href="http://thewebthought.blogspot.com/2013/01/html-ids-and-classes.html" target="_blank">document.getElementById</a>. The advantage is that we can manipulate the inner html part of the element.<br />
Let's see some example.<br />
<br />
<a name='more'></a><span style="color: #6fa8dc;"><b>First example</b></span><br />
Try the following example... <br />
<blockquote>
<code>
<script type="text/javascript"><br />
function changeIH(){<br />
document.getElementById('theElem').innerHTML = '... enjoy yourself';<br />
}<br />
</script><br />
<div id='theElem'>Welcome to the Web Thought...</div><br />
<input type='button' onclick='changeIH()' value='What's next?'/></code></blockquote>
Should I explain it? It looks quite simple... Try it for yourself and see how by clicking on the button the inner HTML of the div is changed.<br />
<br />
<span style="color: #6fa8dc;"><b>Second example</b></span><br />
This is different. Let's change the text according to a user input:<br />
<blockquote>
<code>
<script type="text/javascript"><br />
function changeIH(){<br />
var userText = document.getElementById('userText').value;<br />
document.getElementById('theElem').innerHTML = userText;<br />
}<br />
</script><br />
<div id='theElem'>Chose a new text...</div> <br />
<input type='text' id='userText' value='New Text' /><br />
<input type='button' onclick='changeIH()' value='Submit'/></code></blockquote>
Fill in the input box and press the button: the text "Chose a new text..." is replaced with the new text.<br />
As you can see we can really do anything we want and manipulate the HTML inside a specific tag.<br />
<br />
I could go on with many more example however I think we got to the point.<br />
I leave the rest to your imagination.<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-80087780142637701942013-02-12T07:00:00.000+01:002013-02-12T07:00:06.459+01:00CSS: visibility: hidden vs display: noneWriting for the web thought becomes more complicated everyday. It goes down to the fact that I've wrote more than 380 posts since July 2010 and thinking about new things to talk about is getting harder and harder. However, some times a short conversation with a friend or a colleague might ignite a sparkle and might give me new ideas for a short post like the following.<br />
<br />
I was in fact talking with a friend when it came to my mind that the difference between <b>visibility </b>and <b>display</b> properties in <b>CSS </b>is some times completely missed. Specifically, the difference between <i>visibility: hidden</i> and <i>display: none</i>.<br />
The point is not that complicated, so in just a few words we are going to see the difference, and we are going to explore when to use visibility instead of display.<br />
<br />
<a name='more'></a><span style="color: #6fa8dc;"><b>The situation</b></span><br />
We have a DOM element in our page and we want it to "not be shown". The way we are going to make it invisible, is indeed affecting our whole page.<br />
Usually, we use two CSS properties: visibility and/or display. But which one is better? Do they have the same effect on the page?<br />
First thing: there's no better property. There must be a reason why we have two different properties which do the same thing.<br />
Second: they apparently do the same thing, but they have different effect on the page.<br />
<br />
<span style="color: #6fa8dc;"><b>Visibility: hidden</b></span><br />
We can set visibility to hidden or display. The two values have obviously the opposite effect: the first hides the element, the second makes the element visible.<br />
The point here is that the element - even when hidden - will always take up space. So, if we consider an element with a specific height and width, it will always take up that space - even when hidden.<br />
It means that if we have, for example, three elements in a row, and we hide the second, the first and the third won't get together at all - the space between them will stay the same. The hidden element stays in the normal document flow.<br />
<br />
<span style="color: #6fa8dc;"><b>Display: none</b></span><br />
I'm sure now you know what happens when we use the display properties.<br />
When we set it to none, the element is someway removed from the document flow and the surrounding elements will collapse, taking the space that was once taken by the hidden element.<br />
The difference is not that small. It is indeed a big difference, and it heavily affects the document flow.<br />
<br />
As you can see it's quite redundant for me to say when to use one property against the other. It really goes down to what we need. Usually, when we want to make an element disappear, we don't really want to leave a blank space. In fact, leaving a blank space is often the same as not hiding the element.<br />
<br />
I hope you find the post useful, Leave your thought in the comments section below! <div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-75466396165011435062013-02-07T07:00:00.000+01:002013-02-07T07:00:00.142+01:00SQL: AND vs OR (operators)In <b>SQL Server</b> we can use different operators in our queries: <b>AND</b>, <b>OR</b>, LIKE, BETWEEN and so on. In this short post we are going to see AND and OR because I've noticed that some could get confused by the results obtained when using them.<br />
<br />
So, let's clear the situation a bit, because we really need to know what we are doing!<br />
<br />
<a name='more'></a><span style="color: #6fa8dc;"><b>General</b></span><br />
Just to be clear, there's a big difference between AND and OR, in fact they both return a Boolean data type with a value of TRUE or FALSE, but:<br />
AND returns TRUE when <i>both</i> Boolean expressions are TRUE<br />
OR returns TRUE when <i>either</i> Boolean expressions are TRUE<br />
That might sound confusing, but please take note of the difference above as a start.<br />
<br />
<span style="color: #6fa8dc;"><b>AND</b></span><br />
The operator combines two Boolean expressions and returns TRUE when both are TRUE. The operator is always evaluated first: so when we use different operators, AND comes always first. That's important, because if we use an AND operator together, for example, with an OR operator, AND is always evaluated first. To change that, we need to use parentheses.<br />
<br />
In a query when we search records, we use AND when we want both expressions to be true. However we should consider the unexpected. Follow me...<br />
The result of two TRUE expressions is TRUE. When just one of the two expressions is FALSE, the result is FALSE. When one expression is UNKNOWN: if the second is TRUE we get UNKNOWN; if the second is FALSE we get FALSE; if the second is UNKNOWN we get UNKNOWN.<br />
<br />
Ok, I know it's complicated, but please just spend a few minutes to understand the above because it will save you a lot of time when an operator is not giving the expected result.<br />
<br />
<span style="color: #6fa8dc;"><b>OR</b></span><br />
The OR operator just combines two Boolean operators. It doesn't matter if just one of the two expressions is TRUE. As said, when we use the OR operator together with an AND operator, the AND operator is evaluated first.<br />
Again, let's see the results when we use the OR operator.<br />
The result of two TRUE expressions is TRUE. That is even if just one expression is TRUE:<br />
TRUE OR TRUE = TRUE<br />
TRUE OR FALSE = TRUE<br />
FALSE OR TRUE = TRUE<br />
Obviously two FALSE expressions will give us FALSE. If one expression is UNKNOWN, and the second is TRUE, we get TRUE; if the second is FALSE, we get UNKNOWN; and if the second is UNKNOWN we get UNKNOWN.<br />
<br />
Please try again to understand the above, because it will really help you when things get confused.<br />
<br />
Ok folks, that's all for today. See you next time...<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-40845356942265456642013-02-05T07:00:00.000+01:002013-02-05T07:00:02.378+01:00ASP: URL Rewrite and IIS7Following a kind suggestion by a follower, today we are going to see how to use <b>IIS URL Rewrite</b> 2.0 for IIS 7.<br />
<br />
First of all, what's URL Rewrite? <br />
<blockquote class="tr_bq">
"IIS URL Rewrite 2.0 enables Web administrators to create powerful rules
to implement URLs that are easier for users to remember and easier for
search engines to find. By using rule templates, rewrite maps, .NET
providers, and other functionality integrated into IIS Manager, Web
administrators can easily set up rules to define URL rewriting behavior
based on HTTP headers, HTTP response or request headers, IIS server
variables, and even complex programmatic rules. In addition, Web
administrators can perform redirects, send custom responses, or stop
HTTP requests based on the logic expressed in the rewrite rules."</blockquote>
<br />
Rest assured, we can use it for a classic <b>ASP</b> site as well.<br />
What we need to do is:<br />
1) install URL Rewrite after downloading it from the <a href="http://www.iis.net/downloads/microsoft/url-rewrite" rel="nofollow" target="_blank">Ms IIS site</a>;<br />
2) enable ASP.NET role service on IIS 7; <br />
3) write a rule <br />
<br />
<a name='more'></a><br /><br />
Nothing very complicated. What we will focus on in the following post is how to write appropriate rules in order to change URL. <br />
<br />
<br />
The use of URL Rewrite is quite simple. We need to open <b>IIS Manager</b>, select the <b>Default Web Site</b> and in the Feature View click on <b>URL Rewrite</b>. At that point, on the right panel we will be able to click on <b>Add Rules</b> and select <b>Blank rule</b>... and here starts the magic.<br />
<br />
The next panel has all we need to use to set up a new rule.<br />
First of all give a name to your new rule. After that we fill in the Match URL section. That is where we set what to look for or the URL we want to change.<br />
<br />
Remember when we talked about Regular Expressions? No? Well go and see what we discussed on <a href="http://thewebthought.blogspot.com/2011/12/javascript-validate-forms-with-regular.html" target="_blank">this</a> post. We need to refresh those ideas because we need to use Regular Expressions to fill in the Match URL section.<br />
For "Requested URL" select "Matches the pattern" and for "Using" select "Regular Expression". In the pattern filed insert the regular expression used to search for a candidate URL. This is where we create the rule used to match an URL to be changed to something else.<br />
Some part of our patter are between parentheses which creates capture groups referenced in the "Action" section.<br />
Now, select "Ignore Case" and go to the Action section.<br />
Here is where we decide what the rule should do when a match is found. Because we want to rewrite the URL, we select "Rewrite" in the first list box. In the "Action properties" we need to write the way we want the URL to appear. Select "Append query string" and then apply.<br />
<br />
As an example, we can suppose that our URL is like:<br />
<blockquote class="tr_bq">
http://localhost/article/342/some-article-title</blockquote>
and we want it to appear as:<br />
<blockquote class="tr_bq">
http://localhost/article.aspx?id=342&title=some-article-title</blockquote>
How?<br />
It all depends on our RegEx. In order to match the URL we can use something like:<br />
<blockquote>
<code>
^article/([0-9]+)/([_0-9a-z-]+)</code></blockquote>
as explained on the IIS Ms site.<br />
In the "Action properties" we can use the following expression:<br />
<blockquote>
<code>
article.aspx?id={R:1}&title={R:2}</code></blockquote>
Forget about the .aspx extension. The important thing here is the use of the capture groups (R1 and R2) which are defined in the match pattern (first RegEx above - see the parentheses?).<br />
<br />
As you can see it is not very complicated. Or, just to be clear enough, it all depends on RegEx and we all know they are not really easy to understand.<br />
However, there are many interesting tools on the web that can help us to validate RegEx like <a href="http://www.gskinner.com/RegExr/" rel="nofollow" target="_blank">RegExr</a>. All we really need to do is understand how Regular Expressions work.<br />
<br />
Last but not least, I have to say I've never used URL Rewrite, but in order to help our kind reader who ask information about it, I asked some friends who have used and who are still using URL Rewrite: they told me it's perfectly working and, provided you know RegEx, it is quite easy to set up.<br />
<br />
Enjoy and let me know what you think!<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com1tag:blogger.com,1999:blog-6718406939865222936.post-56444773603602142622013-01-31T07:00:00.000+01:002013-01-31T07:00:16.099+01:00jQuery: chaining!<div style="text-align: left;">
</div>
<a href="http://2.bp.blogspot.com/-pNA026bYyIM/TJyU791fuxI/AAAAAAAAACM/KXSX3TDY1yc/s1600/jq.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="jQuery" border="0" src="http://2.bp.blogspot.com/-pNA026bYyIM/TJyU791fuxI/AAAAAAAAACM/KXSX3TDY1yc/s1600/jq.jpg" title="jQuery" /></a>We should all bless <b>jQuery</b>. It gives JavaScript a completely new face in terms of usability and easiness.<br />
Considering the <a href="http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/" rel="nofollow" target="_blank">latest news</a> about version 2.0, jQuery is quite alive and kicking...<br />
<br />
I don't know how many of you know about <b>chaining</b>, but I think we should all try to understand how and why we should use it while writing jQuery code.<br />
<br />
<a name='more'></a><br />
<br />
As a simple example, you know that we can manipulate DOM elements with specific jQuery methods. As beginners, if we want to manipulate an element more than once, we separate each method as follows:<br />
<blockquote>
<code>
$("#element").fadeIn('fast');<br />$("#element").fadeOut('slow');<br />$("#element").css('marginRight', '10px');</code></blockquote>
However, we can actually chain all those actions together:<br />
<blockquote>
<code>
$("#element").fadeIn('fast').fadeOut('slow').css('marginRight', '10px');</code></blockquote>
As you can see there's an immediate benefit: we write less code which means that our document will be smaller in size.<br />
But that's not all (and definitely not the most important thing!)<br />
<br />
First of all, let me say something important. You may think that using chaining we could end up with unreadable code. That's not true because jQuery doesn't care about spaces in code and the above code could be like the following without generating any problem at all:<br />
<blockquote>
<code>
$("#element").fadeIn('fast')<br /> .fadeOut('slow')<br />
.css('marginRight', '10px');</code></blockquote>
The above is surely more readable, but aren't we missing the "size" advantage?<br />
Yes, we are, however we are taking another great advantage none the less.<br />
<br />
Every time we use jQuery to manipulate an element, we search for the element itself (using the selector) and then we apply the chosen method. That operation takes time.<br />
Look at the very first example: jQuery searches for the element in each line.<br />
With chaining the element is searched just once: the code will run faster... no doubt about it!<br />
<br />
Ok, ladies and gentlemen, that's all for today. See you next time. <div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com2tag:blogger.com,1999:blog-6718406939865222936.post-36032356955551059062013-01-29T07:00:00.000+01:002013-01-29T07:00:00.873+01:00SQL: which columns should have an indexIn <b>SQL</b> tables might have primary keys and indexes. The primary key identifies each record. The key must be unique, it can't be NULL and each table must have just one key.<br />
<b>Index</b>es are something different: they are used to speed up the queries on a specific table. That means we absolutely need indexes on large tables which we often query.<br />
<br />
<a name='more'></a>However there's something we need to take in account: indexed tables are slower to update because the index itself need to be updated as well. Thus, we need to carefully decide which are the columns we want to be indexed.<br />
<br />
Deciding which columns should be indexed is not that difficult. Consider your frequently used queries and create index for those columns that are used in WHERE clauses. Obviously it's a general idea, because if we query a table to get 10% to 20% of the contained records, an index might be useless.<br />
I suggest to use 1 or 2 indexes in a table: too many of them will definitely slow down your updates.<br />
<br />
Generally indexes speed up and optimise queries against a table. However we should not over use them. In that regard, there is an interesting tool I found on the net which will analyse your database and determine possible improvements by suggesting indexes. It's call <a href="http://blogs.msdn.com/b/queryoptteam/archive/2006/06/01/613516.aspx" rel="nofollow" target="_blank">Automated Auto-Indexing</a> and it's worth giving it a try.<br />
<br />
We can get all the already created indexes in a database by querying the sys.indexes and the sys.index_columns system tables:<br />
<blockquote>
<code>
select * from sys.indexes<br /><br />select * from sys.index_columns</code></blockquote>
In addition, I've already explained how to create indexes without SSMS in <a href="http://thewebthought.blogspot.com/2011/07/sql-server-create-database-with-queries.html">another post</a> and if you're interested you can go there and see for yourself.<br />
<br />
<br /><div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-35053438010193706312013-01-24T07:00:00.000+01:002013-01-24T07:00:03.423+01:00SQL: subqueriesIn this short post, I would like to introduce the concept of subqueries in <b>SQL</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-gtgSudUaxXg/UPzoewzT1MI/AAAAAAAAAYw/k9ZwLhW2V3Y/s1600/SQL.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-gtgSudUaxXg/UPzoewzT1MI/AAAAAAAAAYw/k9ZwLhW2V3Y/s1600/SQL.jpg" /></a></div>
A <b>subquery </b>is a query statement inside another query statement. As you already know the order in which a statement is processed is quite important. That is a basic rule like in maths: writing something like 2+2*5 is different than writing (2+2)*5. The first operation gives 12, the second 20.<br />
In SQL the principle is identical.<br />
<br />
<a name='more'></a>In order to explain what I'm saying, let's try an example.<br />
Consider we have a table (rankingTable) with a column (rank) with numbers that indicates a ranking. The higher the number, the higher the rank.<br />
We can get the highest rank with a query like:<br />
<blockquote>
<code>
SELECT MAX(rank) as highestRank<br />
FROM rankingTable</code></blockquote>
Now we can use the above query and use it in a WHERE clause:<br />
<blockquote>
<code>
SELECT *<br />
FROM rankingTable<br />
WHERE rank = (SELECT MAX(rank) FROM rankingTable)</code></blockquote>
First, the subquery is executed, then the main query is executed considering the results of the subquery.<br />
<br />
In general a subquery syntax can be explained like:<br />
<blockquote>
<code>
SELECT column_name [, column_name ]<br />
FROM table1 [, table2 ]<br />
WHERE column_name OPERATOR<br />
(SELECT column_name [, column_name ]<br />
FROM table1 [, table2 ]<br />
[WHERE])</code></blockquote>
The above is a SELECT statement, but subqueries can be used with INSERT, UPDATE and DELETE statements.<br />
<br />
<br />
Subqueries are really powerful and the above examples are just a way of using them. In fact the subquery is in the WHERE clause. However they can be used directly in the SELECT statement or in the FROM clause as well.<br />
As an example for the SELECT statement:<br />
<blockquote>
<code>
SELECT (number/(SELECT SUM(number) FROM table)) as myNumber<br />
FROM table</code></blockquote>
The result of the above is myNumber which represents each number divided by the sum of all numbers.<br />
<br />
That's all for today. I hope you find the above info interesting enough. <div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-44030934745572598722013-01-22T07:00:00.000+01:002013-01-22T07:00:07.891+01:00JavaScript: void(0) and links that do nothingWhat is a web page after all? Isn't it a bunch of information linked to something else?<br />
<br />
<a href="http://4.bp.blogspot.com/-3759f77a2rU/UPzmhXe6rnI/AAAAAAAAAYg/7ef0ClTi6oY/s1600/javascript.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-3759f77a2rU/UPzmhXe6rnI/AAAAAAAAAYg/7ef0ClTi6oY/s1600/javascript.jpg" /></a>As you know, web sites without <b>link</b>s don't exist. And if they exist they are basically dead. When we insert a link in a page, we generally want people to click on it and go somewhere else. However, some times we need to create links that do nothing. Or to better say, links that do not take the user somewhere else.<br />
<br />
With <b>JavaScript </b>we can create links which can perform different action from actually linking to another page.<br />
However this is not new to us. We already know the possibility of using links to show or hide DOM elements (<b>jQuery </b>is a great tool in that matter and it's JavaScript as well).<br />
On the other side, here we are talking about something different. We will see how to use <b>void(0)</b>, but we will see something else and we will make some considerations about it.<br />
<br />
<a name='more'></a><span style="color: #6fa8dc;"><b>JavaScript in hyperlinks</b></span><br />
As a start, you might already know we can embed JavaScript directly in links. Something like:<br />
<blockquote>
<code>
<a href="javascript: alert('The Web Thought')">Click!</a> </code></blockquote>
is perfectly working and when clicked, the link will open an alert box.<br />
What we are doing here is quite simple. The alert in JavaScript is a method that returns a null value. That is why we can use it directly in a link.<br />
In the above example, we are doing something very simple, but what if we need to do something more complicated? That's when we need to use void(0).<br />
<br />
<span style="color: #6fa8dc;"><b>Void(0)</b></span><br />
Void(0) is always returning a null value, avoiding the load of a new page if used in a link:<br />
<blockquote>
<code>
<a href="javascript: void(0)">Link that do nothing</a></code></blockquote>
The above snippet will produce a link which does nothing when clicked.<br />
What's the whole use of it then?<br />
A simple example you can find on the Internet is the following:<br />
<blockquote>
<code>
<a href="javascript: void(myVal=10);alert('myVal= '+myVal)">Show the number!</a> </code></blockquote>
We set myVal to 10 and show it with an alert box. Simple as that. Everything is inside the link itself.<br />
Ok... but... is all the above good?<br />
<br />
<span style="color: #6fa8dc;"><b>Maybe not...</b></span><br />
First of all, some of you might have risen an eyebrow: "Why don't we use onClick?".<br />
Good question. And I generally agree with that. I do prefer to use onClick even if in a different way. However, should we use:<br />
<blockquote>
<code>
<a href="#" onClick="myJsFunc();">Link</a></code></blockquote>
or<br />
<blockquote>
<code>
<a href="javascript:void(0)" onClick="myJsFunc();">Link</a></code></blockquote>
Some says the first solution, some the second. And the reasons are quite important in both cases.<br />
Generally developers prefer the void(0) solution, but there's something else about it which is more important. And this is my opinion.<br />
<br />
<span style="color: #6fa8dc;"><b>My opinion</b></span><br />
Ok, it's my opinion! It counts for what it counts.<br />
Hyperlinks should be used to link to something else. It's a bad practice to use links that do nothing. Or better, links that are not links should not be used.<br />
If we need to perform an action when a user clicks an element of the page, we can use the onClick event directly in the element. We can, for example, use jQuery (as I said at the beginning of the post) with a styled element (a div for example) that trigger some action when clicked.<br />
Other solution: we can use a button. A button is born to be pushed. I know you might argue that a link is the same. However links are born to be clicked to go somewhere else. Buttons are born to be clicked in order to perform other action.<br />
<br />
I believe it will be an open debate. But I would like to know what you think about it. Please leave a message in the comments section below, if you want to share your thoughts.<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com1tag:blogger.com,1999:blog-6718406939865222936.post-70602014441197173692013-01-17T07:00:00.000+01:002013-01-17T12:22:42.734+01:00ASP: special characters<div class="separator" style="clear: both; text-align: center;">
</div>
<a href="http://3.bp.blogspot.com/-YTYPmaIWUUU/UO7wuf2GJtI/AAAAAAAAAXk/NjlE7NAUfD8/s1600/keyboard.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; margin-top: 1em;"><img alt="ASP" border="0" height="65" src="http://3.bp.blogspot.com/-YTYPmaIWUUU/UO7wuf2GJtI/AAAAAAAAAXk/NjlE7NAUfD8/s200/keyboard.jpg" title="ASP" width="200" /></a><br />
<br />
One of things that newbies find difficult when trying to learn <b>ASP </b>is the way code is tructured and what all those <b>special characters</b> are there for.<br />
<br />
<br />
<br />
In this short post we are going to see the most common special characters we can find in an ASP page:<br />
<ul>
<li>&</li>
<li>'</li>
<li>_</li>
<li>:</li>
<li>.</li>
<li><% ... %></li>
<li><%= ... %></li>
</ul>
As you will see, some of the above might hide even little secrets and surprises.<br />
<br />
<a name='more'></a><span style="color: #6fa8dc;"><b>The ampersand</b></span><br />
The ampersand or "&" is used in ASP to concatenate strings.<br />
Combining strings is easy:<br />
<blockquote>
<code>
<%<br />
Dim strName <br />
Dim strName1<br />
Dim strName2 <br />
strName1 = "Hello"<br />
strName2 = "world!"<br />
strName = strName1 & " " & strName2<br />
response.write (strName)<br />
%></code></blockquote>
Result:<br />
<blockquote>
<code>
Hello world!</code></blockquote>
That was easy.<br />
<br />
<span style="color: #6fa8dc;"><b>The apostrophe</b></span><br />
The apostrophe " ' " is used for commenting code. In any case, the code after the apostrophe is never executed.<br />
<br />
<span style="color: #6fa8dc;"><b>The underscore</b></span><br />
The underscore "_" is used to span the code on multiple lines. I must say I never use this special character in my code, but there you are. If you want your code to span on multiple lines, use the underscore:<br />
<blockquote>
<code>
<%<br />
response.write ("This is a long string," &_<br />
" and we want to keep it visible so that " &_<br />
"it won' hide on the right side of the page!")<br />
%></code></blockquote>
<span style="color: #6fa8dc;"><b>The semicolon</b></span><br />
This one is quite obscure: we use the semicolon ":" when we need to put multiple lines of code on just one line. Isn't it crazy? Well, if you ever need to do it, now you know how.<br />
<blockquote>
<code>
<%<br />
Dim strOne<br />
Dim strTwo<br />
Dim strThree<br />
strOne = "1" : strTwo = "2" : strThree = "3"<br />
%></code></blockquote>
Wow!<br />
<br />
<span style="color: #6fa8dc;"><b>The period</b></span><br />
We all know that with ASP we have objects because basically it is an Object Oriented Programming Language. Well, objects have methods and in order to specify an object method we use a period ".".<br />
The object in fact is followed by its method, separated by a dot like in "myObject.Method".<br />
<br />
<span style="color: #6fa8dc;"><b>The percentage</b></span><br />
Percentage is used to delimit ASP code. This is easy:<br />
<blockquote>
<code>
<%<br />
... ASP code goes here ...<br />
%></code></blockquote>
<span style="color: #6fa8dc;"><b>Equal and percentage </b></span><br />
This is used as a write shortcut: when we need to print something we can use <%= instead of response.write().<br />
<blockquote>
<code>
<%<br />
Dim strName<br />
strName = "Hello!"<br />
%><br />
<%=strName%></code></blockquote>
Result:<br />
<blockquote>
<code>
Hello!</code></blockquote>
Ok everyone. That's all for today.<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com2tag:blogger.com,1999:blog-6718406939865222936.post-20507943423471568442013-01-15T07:00:00.000+01:002013-01-15T07:58:51.733+01:00ASP: variables naming conventionWhen <b>naming variables </b>in <b>ASP</b>, we should consider some <b>conventions</b>.<br />
<div style="text-align: left;">
<a href="http://3.bp.blogspot.com/-C1mvAo4tHgI/UO7ubd3UPGI/AAAAAAAAAXQ/q-uOnuBWpMw/s1600/asp.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; margin-top: 1em;"><img alt="ASP" border="0" src="http://3.bp.blogspot.com/-C1mvAo4tHgI/UO7ubd3UPGI/AAAAAAAAAXQ/q-uOnuBWpMw/s1600/asp.jpg" title="ASP" /></a></div>
<br />
Because the way we write code is quite important for us and, possibly, other people, we do need to keep things as much readable as we can. That means, for example, we should use indents when writing procedures and functions or we should follow a common structure in code blocks.<br />
<br />
In general we need to make things easy to read and understand.<br />
That is why there are common naming convention for variables. And in this article we are going to explore them.<br />
<br />
<a name='more'></a><span style="color: #6fa8dc;"><b>Variable data types</b></span><br />
As you may already know, when we create a variable we usually know what type of data it will be used for. In VBScript we don't explicitly set a variable data type, however by using prefixes we can help us and others to understand what is the intended use for the variable itself.<br />
If you read code often you know what I mean. Different is when, for example, you find code snippets on the net (variable names have in fact more imaginative forms due to the need of being more clear). But when we write code for a web application or a web site, we do need to be more, let me say, technical. And so we need to make things more clear.<br />
There are many data types, but for each one of them, we have a three letters prefix.<br />
<br />
<span style="color: #6fa8dc;"><b>Variable names</b></span><br />
According to the above, variable names should have a non-capitalised prefix, indicating the data type, followed by a word which should be unique and understandable. That could pose a problem: how can a word be clear and immediately understandable, but at the same time not to long?<br />
When we think about a name for a variable, we might make the mistake to use a too long word. Something easy to imagine is "strName", but sometimes that's not enough.<br />
<br />
Summarising: we need to choose the right variable data type and then we need to imagine an appropriate short but immediately understandable word which will explain what the variable is.<br />
<br />
The two parts, together will form the variable name.<br />
<br />
<span style="color: #6fa8dc;"><b>Data type prefixes</b></span><br />
Let's start from the data type prefixes. The following list contains the data type and the related prefix:<br />
<br />
<table border="1" style="width: 50%;"><tbody>
<tr valign="top"><th width="35%">Data Type </th> <th width="65%">Prefix </th> </tr>
<tr valign="top"> <td>Boolean </td> <td>bln </td> </tr>
<tr valign="top"> <td>Byte </td> <td>byt </td> </tr>
<tr valign="top"> <td>Collection object </td> <td>col </td> </tr>
<tr valign="top"> <td>Currency </td> <td>cur </td> </tr>
<tr valign="top"> <td>Date-time </td> <td>dtm </td> </tr>
<tr valign="top"> <td>Double </td> <td>dbl </td> </tr>
<tr valign="top"> <td>Error </td> <td>err </td> </tr>
<tr valign="top"> <td>Integer </td> <td>int </td> </tr>
<tr valign="top"> <td>Long </td> <td>lng </td> </tr>
<tr valign="top"> <td>Object </td> <td>obj </td> </tr>
<tr valign="top"> <td>Single </td> <td>sng </td> </tr>
<tr valign="top"> <td>String </td> <td>str </td> </tr>
<tr valign="top"> <td>User-defined type </td> <td>udt </td> </tr>
<tr valign="top"> <td>Variant </td> <td>vnt </td> </tr>
<tr valign="top"> <td>ADO command </td> <td>cmd </td> </tr>
<tr valign="top"> <td>ADO connection </td> <td>cnn </td> </tr>
<tr valign="top"> <td>ADO field </td> <td>fld </td> </tr>
<tr valign="top"> <td>ADO parameter </td> <td>prm </td> </tr>
<tr valign="top"> <td>ADO recordset </td> <td>rst </td></tr>
</tbody></table>
<br />
<br />
As you can see, the prefix is not capitalised. The prefix is then followed by the name. In this matter, it is advisable to start with a capital letter following the form "prefixName".<br />
<br />
Ok, I think I said enough for today. <br />
I hope you find the above info interesting. If so leave a comment below!<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-21748678193871386612013-01-10T07:00:00.000+01:002013-01-10T07:00:02.157+01:00HTML: IDs and classes<div class="separator" style="clear: both; text-align: center;">
</div>
<a href="http://4.bp.blogspot.com/-Qyg9Uxlg0ZE/UOQR_hKHGzI/AAAAAAAAAW4/C0qiQa6MQqM/s1600/css.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="CSS" border="0" height="200" src="http://4.bp.blogspot.com/-Qyg9Uxlg0ZE/UOQR_hKHGzI/AAAAAAAAAW4/C0qiQa6MQqM/s200/css.jpg" title="CSS" width="158" /></a>As I said in the last post, it's quite interesting to explore the differences between <b>ID</b>s and <b>class</b>es in <b>CSS</b>.<br />
<br />
First of all, they are both selectors. But they are very different:<br />
1) IDs are unique identifiers;<br />
2) classes are not unique.<br />
<br />
The above first difference is quite important because we can give a unique identifier to just one page element, while we can give a class to more than one element.<br />
<br />
<a name='more'></a>Imagine we have one span and two divs. We can give the span and one div a class, and an ID to the other span:<br />
<blockquote>
<code>
<span class="spanDiv">One</span><br />
<div class="spanDiv">Two</div><br />
<div id="justDiv">Three</div></code></blockquote>
So we can make the first two tags red and the third blue using something like:<br />
<blockquote>
<code>
<style type="text/css"><br />
.spanDiv {<br />
color: #FF0000;<br />
}<br />
#justDiv {<br />
color: #0099FF;<br />
}<br />
</style></code></blockquote>
And the result will be:<br />
<style type="text/css">
.spanDiv {
color: #FF0000;
}
#justDiv {
color: #0099FF;
}
</style>
<span class="spanDiv">One</span>
<br />
<div class="spanDiv">
Two</div>
<div id="justDiv">
Three</div>
<br />
That's basic, isn't it? I believe we all know about this big difference, but for the beginners out there, I thought it was important to make it clear.<br />
<br />
So just remember: you cannot give the same ID to two elements.<br />
<br />
Another difference is quite clear from the above code: while classes in CSS are defined with a starting dot (".spanDiv"), IDs start with a "#" ("#justDiv"). Obviously classes are given as <i>class="className"</i> while IDs as <i>id="idName"</i>.<br />
<br />
The above differences are what we all need to know in order to understand when to use IDs and when to use classes.<br />
Because a class can be used several times, we use them when we need to apply a specific style rule to different elements. On the other hand, IDs are used when a rule should be applied just to one element, being sure that it won't be applied to anything else.<br />
In the past, web developers suggested to use IDs and not classes. That's because, CSS was mainly embedded in each web page. Today, I believe the above rule doesn't apply anymore. In fact we use linked CSS stylesheets, global rules across the whole site. That is why I suggest to use both IDs and classes, depending on the related situation.<br />
Another thing to take into account is the fact that IDs and classes are used in JavaScript as well, with <a href="http://thewebthought.blogspot.com/2012/08/dom-documentgetelementsby.html" target="_blank">getElementById and getElementByClassName</a>. So, when we give an element an ID or a class, we should consider JavaScript as well. <br />
<br />
Can we use IDs and classes together?<br />
Oh yes, we can. And some times it is very convenient.<br />
Let's say we have a list of elements (three divs with red font), but just the middle one should be bold:<br />
<blockquote>
<code>
<style type="text/css"><br />
.red {<br />
color: #FF0000;<br />
}<br />
#bold {<br />
font-weight: bold;<br />
}<br />
</style><br />
<div class="red">One</div><br />
<div class="red" id="bold">Two</div><br />
<div class="red">Three</div></code></blockquote>
The result?<br />
<style type="text/css">
.red {
color: #FF0000;
}
#bold {
font-weight: bold;
}
</style>
<br />
<div class="red">
One</div>
<div class="red" id="bold">
Two</div>
<div class="red">
Three</div>
<br />
As a last thing.. do not use selectors (either IDs or classes) when we don't need them. Remember that we can select an element by its tag. If we need to style all the links in a page, we don't really need to give every <a> tag a class or an ID... just select the <a> tag.<br />
<br />
That's all for today.<br />
See you next time!<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-12556564061637688182013-01-08T07:00:00.000+01:002013-01-08T07:00:06.106+01:00HTML & CSS: common mistakesToday we are going to see something half way between funny and serious: <b>common mistakes</b> we make while using <b>HTML </b>and <b>CSS</b>.<br />
<br />
Why is it funny? Because sometimes those mistakes are so basic that when talking about them we usually react saying we don't make such mistakes. But then... when it happens, for any reason - even the most incredible - the only thing we can do is laugh. Mistakes are always just around the corner. The better we know them, the easier we are going to avoid them.<br />
<br />
And when it happens... well... just have a laugh!<br />
<br />
<a name='more'></a><br /><br />
<span style="color: #6fa8dc;"><b>HTML</b></span><br />
The most common mistake when writing HTML code goes under the name of "how could you leave it open?". When I was young, my teacher used to tell me that quotes and parenthesis must always be closed, otherwise the words inside would catch a cold.<br />
Well, think it the same way. <i>Always close HTML tags that need to be closed</i>.<br />
<br />
The second mistake is again very common between beginners: "right things in the right place". We really need to keep things tidy and neat and avoid the great pitfall: <i>use proper nesting tags</i>. Just to be clear for those of you that started coding yesterday... the following is incorrect:<br />
<blockquote>
<code>
<div><span>Hello!</div></span></code></blockquote>
<br />
The third mistake: "right dress for right weather". I've talked about it and I think it's very important: <i>choose the right <a href="http://thewebthought.blogspot.com/2011/08/html5-importance-of-doctype.html" target="_blank">DOCTYPE</a> for your work of art</i>!<br />
<br />
Another mistake: "what are those tiny upper scratches in my code?"<br />
When the great minds decided to make HTML a standard, they decided to use quotes. As I always remember my old primary school teacher, I usually remember to close quotes... do you?<br />
Thus, if something is not working... <i>check those damn quotes</i>!<br />
Oh! By the way... that's a common mistake in other languages like JavaScript and ASP as well.<br />
<br />
We are getting close to CSS... and so, the last HTML mistake is something that stays in between. Can you guess?<br />
"Is it meat or fish?"<br />
Well IDs are not classes and classes are not IDs.<br />
I believe you all already know the difference, but there it is. <i>Do not confuse IDs and classes, because they are different</i>.<br />
Should I explain why? In CSS, jQuery and JavaScript we can manipulate DOM elements by IDs or classes. Well... I think I will write something about it in the future...<br />
<br />
Now, just to finish up things a few reminders:<br />
1) <i>do not use uppercase tags</i> (<DIV>);<br />
2) <i>do not use inline styles</i>;<br />
3) <i>use <a href="http://thewebthought.blogspot.com/2011/05/html-special-entity-codes.html" target="_blank">entity codes</a></i>.<br />
<br />
Ok folks, let's move on to CSS!<br />
<br />
<span style="color: #6fa8dc;"><b>CSS</b></span><br />
CSS common mistakes are quite... hmmm... common and - well - similar to HTML's.<br />
<br />
The old primary school teacher strikes again: "what's opened should always be closed!"<br />
We are talking about curly brackets. Well, well, well, we all hate the person who thought curly brackets are cool for CSS, but that's it! We have to accept it.<br />
So <i>remember to close CSS brackets</i>!<br />
And, while we are on it... <i>every declaration should end with a semicolon</i>.<br />
<br />
<a href="http://thewebthought.blogspot.com/2011/03/web-sites-how-to-keep-things-tidy-with.html" target="_blank">As I always say</a>, to keep things tidy we need to be sure that classes and IDs are working properly. As said: "style matters!" and "fish is not meat!". <i>Do not confuse classes with IDs</i>!<br />
<br />
The third mistake is not really a mistake. In fact it is more an advice: "short legged people should not jump the ditch!". I do not like shortcuts: shorthands in CSS are really awful, while shortened colour declarations are incredibly horrible. <i>Do not use shortcuts</i>! ... please ...<br />
<br />
And that's it!<br />
<br />
As always, if you want to share your thoughts about HTML and CSS common mistakes, please do so using the comments section below!<br />
In the meantime... have a glorious day! <div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-12834916976709635182013-01-03T07:00:00.000+01:002013-01-03T07:00:11.288+01:00the web thought: most viewed posts in 2012As I did at the <a href="http://thewebthought.blogspot.com/2012/01/top-ten-most-followed-posts.html" target="_blank">beginning of last year</a>, I would like to list the top 10 most viewed posts for 2012...<br />
<br />
So, here we go - and you might even discover something you have missed last year.<br />
<br />
<ol>
<li value="10"><a href="http://thewebthought.blogspot.com//2012/05/css-making-background-image-fit-any.html" target="_blank">CSS: Making background image fit any screen resolution (revised)</a></li>
<li value="9"><a href="http://thewebthought.blogspot.com//2011/06/css-html-nested-lists-with-style.html" target="_blank">CSS & HTML: nested lists with style</a></li>
<li value="8"><a href="http://thewebthought.blogspot.com//2011/01/jquery-javascript-analogue-clocks.html" target="_blank">jQuery & JavaScript: Analogue clocks</a></li>
<li value="7"><a href="http://thewebthought.blogspot.com//2012/02/css-image-zoom-effect.html" target="_blank">CSS: image zoom effect</a></li>
<li value="6"><a href="http://thewebthought.blogspot.com//2011/06/css-float-center-yes-we-can-do-it.html" target="_blank">CSS: float center? Yes, we can do it!</a></li>
<li value="5"><a href="http://thewebthought.blogspot.com//2012/01/css-fixed-header-and-footer.html" target="_blank">CSS: fixed header and footer</a></li>
<li value="4"><a href="http://thewebthought.blogspot.com//2010/10/asp-create-pdf-files-with-fpdf.html" target="_blank">ASP: Create pdf files with FPDF</a></li>
<li value="3"><a href="http://thewebthought.blogspot.com//2012/01/jquery-loading-content-while-user.html" target="_blank">jQuery: loading content while user scrolls (infinite scroll)</a></li>
<li value="2"><a href="http://thewebthought.blogspot.com//2012/05/web-design-collection-of-progress-bars.html" target="_blank">Web Design: a collection of progress bars</a></li>
<li value="1"><a href="http://thewebthought.blogspot.com//2010/10/css-making-background-image-fit-any.html" target="_blank">CSS: Making background image fit any screen resolution</a></li>
</ol>
<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-4936059397684000332013-01-01T00:00:00.000+01:002013-01-01T00:00:10.572+01:00Happy New Year<div style="text-align: center;">
Just a thought to all the readers
<br />
<br />
<br />
<span style="font-family: "Trebuchet MS",sans-serif;"><span style="font-size: 50PX;"><span style="color: red;">HAPPY 2013!</span></span></span>
</div>
<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-43171724245957991122012-12-27T07:00:00.000+01:002012-12-27T07:00:03.517+01:00JavaScript: syntax checkerIn this short post I'm going to share some really useful <b>JavaScript syntax checker</b>.<br />
<br />
When programming we surely need to check what it's been done. It's better to verify the code when still in production, during the so-called test period. When published, a web site could still contain errors, but what we surely need to avoid is those annoying syntax errors.<br />
<br />
There are specific programs freely available that we can use to do so. Here we are going to see 3 tools that we should carefully consider.<br />
<br />
<a name='more'></a><br /><br />
<span style="color: #6fa8dc;"><b>JSLint</b></span><br />
"<b>JSLint
</b>is a JavaScript program that looks for problems in JavaScript programs.
It is a code quality tool. [...] JSLint takes a JavaScript source and scans it. If it finds
a problem, it returns a message describing the problem and an approximate
location within the source. The problem is not necessarily a syntax error,
although it often is. JSLint looks at some style conventions
as well as structural problems. It does not prove that your program is
correct. It just provides another set of eyes to help spot problems. [...] JSLint can operate on JavaScript source, HTML source, CSS source, or JSON
text."<br />
<br />
As you can see it's quite a complete tool. It's obvious that there's no program that will say if a snippet is correct or not. What those tools can do is help us in spotting a possible issue. And maybe keep our code clean.<br />
<br />
Just visit <a href="http://www.jslint.com/lint.html" rel="nofollow" target="_blank">JSLint</a> web page and read for yourself what it can do for us.<br />
<br />
<span style="color: #6fa8dc;"><b>JSHint</b></span><br />
<a href="http://jshint.com/" rel="nofollow" target="_blank">JSHint</a> is in some way a more simple tool. First of all is an on-line tool and it ".. is a tool to detect
errors and potential problems in JavaScript code and can be used to enforce coding conventions."<br />
<br />
We just need to put the code, select what kind of checks we need and wait for results.<br />
<br />
Again, visit the above web site for more information.<br />
<br />
<span style="color: #6fa8dc;"><b>Jsdoc</b></span><br />
The last tool is a bit different...<br />
"<a href="http://code.google.com/p/jsdoc-toolkit/" rel="nofollow" target="_blank">JsDoc </a>Toolkit is an application, written in JavaScript, for
automatically generating template-formatted, multi-page HTML (or XML,
JSON, or any other text-based) documentation from commented JavaScript
source code."<br />
<br />
The web site explains everything about it and it's worth visiting it, as we all know how important code documentation is (especially in large project).<br />
<br />
Ok, folks... that's all for today.<br />
If you use different JavaScript tools and you want to share them with us, please add them using the comments section below.<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-88076635905288114412012-12-25T00:00:00.000+01:002012-12-25T00:00:07.723+01:00Merry Christmas<h2 style="text-align: center;">
MERRY CHRISTMAS</h2>
<div style="text-align: center;">
FROM<br />
<br />
<br />
<br />
<br />
<img alt="the web thought" border="0" height="105" src="http://4.bp.blogspot.com/-B_TcO2p4xuQ/TX9EtDcKfyI/AAAAAAAAAEY/ZOeKvzoujro/s640/twt.gif" title="the web thought" width="80%" /></div>
<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-56345114496517832362012-12-20T07:00:00.000+01:002012-12-20T07:00:02.905+01:00CSS: overflowWorking with containers in a web page could be tricky, especially if we need to manage large text. There's a CSS declaration which we need to fully understand in that matter: overflow.<br />
<br />
When we create a container - let's call it "box" - the overflow declaration helps the browser to understand what to do with the eventual content that doesn't fit in the container. If the container has a fixed height, what will happens to the content that doesn't fit in the box?<br />
When the box has not a fixed height, the content will fit in any case and the box will enlarge, giving the needed space to the content. When the height is fixed, we might need to use the overflow declaration.<br />
<br />
<span style="color: #6fa8dc;"><b>The overflow declaration</b></span><br />
There are four possible values for overflow:<br />
1) visible<br />
2) hidden<br />
3) auto<br />
4) scroll<br />
<br />
<a name='more'></a><br /><br />
When we assign "<b>visible</b>" to overflow, the content will be always visible, regardless the size of the box.<br />
<br />
<div style="border: 1px solid #cc0000; height: 150px; overflow: visible; white-space: nowrap; width: 150px;">
This is a large text and the first line is long<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text</div>
<br />
<br />
<br />
If set to "<b>hidden</b>", the content not fitting in the box, will not show and the box will appear as a hole in our page, showing just a part of what's behind. The overflowing content will not be accessible to the user.<br />
<br />
<div style="border: 1px solid #cc0000; height: 150px; overflow: hidden; white-space: nowrap; width: 150px;">
This is a large text and the first line is long<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text</div>
<br />
With "<b>auto</b>", scrollbars are shown where necessary. It could be that the horizontal scrollbar is shown, or the vertical one... or both (if needed)<br />
<br />
<div style="border: 1px solid #cc0000; height: 150px; overflow: auto; white-space: nowrap; width: 150px;">
This is a large text and the first line is long<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text</div>
<br />
"<b>scroll</b>" always shows horizontal and vertical scrollbars, regardless what's inside the box. It means that even if the content perfectly fits the container, we will always have scrollbars.<br />
<br />
<div style="border: 1px solid #cc0000; height: 150px; overflow: scroll; white-space: nowrap; width: 150px;">
This is a large text and the first line is long<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text</div>
<br />
Usually we set the overflow to "auto".<br />
<br />
<span style="color: #6fa8dc;"><b>Overflow-x and overflow-y</b></span><br />
We can even play with overflow-x and overflow-y. With the first, we can set the overflowing content behaviour in horizontal, with overflow-y in vertical.<br />
When we need to force the vertical scrollbar only, we will set the overflow-y to "auto".<br />
<br />
<div style="border: 1px solid #cc0000; height: 150px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; width: 150px;">
This is a large text and the first line is long<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text<br />
This is a large text</div>
<br />
In the above example we have overflow-x: scroll and overflow-y: hidden.<br />
As you can see the above two declarations are really helpful, giving us a full control of the situation.<br />
<br />
That's it for today... <br />
Have a nice day and happy coding.<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-48060904801707994122012-12-18T07:00:00.000+01:002012-12-18T07:00:00.483+01:00jQuery: image gallery plug-ins<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-pNA026bYyIM/TJyU791fuxI/AAAAAAAAACM/KXSX3TDY1yc/s1600/jq.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-pNA026bYyIM/TJyU791fuxI/AAAAAAAAACM/KXSX3TDY1yc/s1600/jq.jpg" /></a></div>
<br />
<b>jQuery image gallery plugins</b>! You all know there are so many of those plug-ins, however, here's a list of the best... in my opinion...<br />
<br />
<br />
<br />
<a href="http://bxgalleryplugin.com/" rel="nofollow" target="_blank">bxGallery</a><br />
"bxGallery is jQuery image gallery plugin that contains automatic thumbnail generation."<br />
<br />
<a href="http://www.twospy.com/galleriffic/" rel="nofollow" target="_blank">Galleriffic</a><br />
"Galleriffic is a jQuery plugin that provides a rich, post-back free
experience optimized to handle high volumes of photos while conserving
bandwidth. I am not so great at spelling, and it was much later that I realized
that the more appropriate spellings would be Galle<i>rif</i>ic or
Galle<i>rrif</i>ic, but is too late now for a name change, so Galleriffic
remains." <br />
<br />
<a href="http://www.pikachoose.com/" rel="nofollow" target="_blank">Pikachoose</a><br />
"Pikachoose is a lightweight jQuery slideshow plugin, with tons of great features! jCarousel integrates smoothly with PikaChoose to give your gallery simple and effective carousel. PikaChoose now has API hooks for integrating lightboxes and other things."<br />
<br />
<a href="http://www.yoxigen.com/yoxview/" rel="nofollow" target="_blank">YoxView</a><br />
"YoxView is a free Lightbox-type media and image viewer jQuery plugin. It's easy to use and feature-rich."<br />
<br />
<a href="http://spaceforaname.com/galleryview/" rel="nofollow" target="_blank">GalleryView</a><br />
"My goal with GalleryView is to provide an extensive set of options to the user. Not only will the user be able to adjust photo and thumbnail sizes, and transition speeds, but he will also have the ability to choose from a selection of element positions, transition styles and other features."<br />
<br />
<a href="http://flexslider.woothemes.com/" rel="nofollow" target="_blank">FlexSlider 2</a><br />
"The best responsive slider. Period."<br />
<br />
<a href="http://brice.lechatellier.com/code-design/wmuslider/" rel="nofollow" target="_blank">wmuSlider </a><br />
"wmuSlider, a jQuery responsive slider"<br />
<br />
<a href="http://responsive-slides.viljamis.com/" rel="nofollow" target="_blank">ResponsiveSlides</a><br />
"ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using list items inside <ul>. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don't natively support it. Only dependency is jQuery (1.4 and up supported) and that all the images are same size."<br />
<br />
<a href="http://coffeescripter.com/2009/07/ad-gallery-a-jquery-gallery-plugin/" rel="nofollow" target="_blank">AD Gallery</a><br />
"...It’s a gallery plugin that’s a bit different than plugins like Thickbox and Lightbox." <div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-67725979147835098052012-12-13T07:00:00.000+01:002012-12-13T07:00:06.797+01:00ASP: permanent redirect with HTTP 301 status codeThere are situations when we need to <b>redirect </b>the visitor to a web site to another place.<br />
This is done for example when the web site is no longer updated or valid.<br />
In order to do so we can redirect the visitor permanently with <b>HTTP 301</b> response code. That is done because we need to tell the user-agent that the location is permanently moved elsewhere.<br />
I believe you all know what HTTP headers are... or maybe we should start from there...<br />
<br />
<a name='more'></a><span style="color: #6fa8dc;"><b>HTTP headers</b></span><br />
HTTP headers are components of the message of request and response in an HTTP transaction. Therefore they define the parameters of the transaction.<br />
They normally have the form of pairs and examples are <i>Cache-Control: no-cache</i> or <i>Content-Type:·text/html;·charset=UTF-8</i>. If you need to see headers from a web page, you can always visit
<a href="http://www.rexswain.com/httpview.html" rel="nofollow" target="_blank">Rex Swain's HTTP Viewer</a> submit an URl and get the headers.<br />
<br />
<span style="color: #6fa8dc;"><b>Response redirect?</b></span><br />
In ASP we can redirect to another page using Response.Redirect. However the Response.Redirect will generate a status code of 302 which means "The requested resource resides temporarily under a different URI." (quote from <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" rel="nofollow" target="_blank">W3C</a>). And that's not ok with us... we need to have a 301 response code.<br />
In the end Response.Redirect is not a feasible solution. <br />
<span style="color: #6fa8dc;"><b><br /></b></span>
<span style="color: #6fa8dc;"><b>The solution</b></span><br />
We need to use something else. And the best way is to use a Response.AddHeader. Basically we need to issue the status code and then redirect the user:<br />
<blockquote class="tr_bq">
<code><%<br />
Response.Status = "301 Moved Permanently"<br />
Response.AddHeader "Location", "http://www.anothe-site.com/"<br />
Response.End<br />
%></code></blockquote>
We set the status, we add the header and that's it.<br />
<br />
<br />
I hope the above will help someone. As usual please use the comments section below for sharing your ideas and experiences.<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-84055066607433089012012-12-11T07:00:00.000+01:002012-12-12T17:42:46.820+01:00SQL: the power of left, right and INAs the title mentions, in this short article I will show you how to benefit from the use of the <b>left </b>and <b>right</b> <b>SQL</b> <b>functions </b>together with the <b>IN operator</b>.<br />
Before doing so, we need to understand what are the two functions and what the operator is doing.<br />
Please follow me and see what we can do!<br />
<a name='more'></a><span style="color: #6fa8dc;"><b><br />The left and right functions</b></span><br />
The two functions work perfectly when we need to isolate part of a string. They return the left or right part of a character string with the specified number of characters.<br />
As an example, the syntax for the left function is:<br />
<br />
<blockquote>
<code>
LEFT(strVar, numChr)</code></blockquote>
Where strVar is a character string and numChr is a positive number that specifies how many characters we want to get from the string (strVar).<br />
Consider that the same is working for the right function. <br />
The difference between the two functions is that left starts considering the string from the left hand side, while right considers the characters from the right hand side of the string.<br />
As a general example we can create a query like:<br />
<blockquote>
<code>
SELECT LEFT(name, 2)<br />FROM namesTable</code></blockquote>
If our names (name) in the table (namesTable) are “John”, “Jack” and “Daniel” the results from the above query will be: “Jo”, “Ja” and “Da”. We are getting just the leftmost two characters from the name column.<br />
To simplify the above example we can create two simple queries for the left and right functions:<br />
<blockquote>
<code>
SELECT LEFT(‘abcdefg’, 2)<br />SELECT RIGHT(‘abcdefg’, 2)</code></blockquote>
The first query will return ‘ab’ while the second will return ‘fg’.<br />
<br />
<span style="color: #6fa8dc;"><b>The IN operator</b></span><br />
The IN operator can be used to determine if a specified value matches any value in a subquery or a list.<br />
Now... now... that might sound complicated, but it’s not.<br />
A common use of the IN operator is in the WHERE clause. We can in fact convert a query like:<br />
<blockquote>
<code>
SELECT *<br />FROM namesTable<br />WHERE name = ‘John’ or name = ‘Jack’ or name = ‘Daniel’</code></blockquote>
To a query like:<br />
<blockquote>
<code>
SELECT *<br />FROM namesTable<br />WHERE name IN (‘John’, ‘Jack’, ‘Daniel’)</code></blockquote>
Isn’t it cool?<br />
There something more interesting. We can even use another operator... well, actually the opposite operator: NOT IN. As you imagine NOT IN will return the names different from ‘John’, ‘Jack’ and ‘Daniel’:<br />
<blockquote>
<code>
SELECT *<br />FROM namesTable<br />WHERE name NOT IN (‘John’, ‘Jack’, ‘Daniel’)</code></blockquote>
<br />
<span style="color: #6fa8dc;"><b>All together now!</b></span><br />
Now, we can combine the two functions and the IN operator. How?<br />
Let’s say we want to retrieve all records only in specific cases. In T-Sql we can use a conditional statement and execute a query based on that.<br />
<blockquote>
<code>
IF (SELECT COUNT(*) FROM namesTable) > 1 <br />BEGIN <br />... ... ...<br />END</code></blockquote>
The above executes the code inside the BEGIN END only if the table namesTable contains more than 1 record. <br />
At the same time we can use something like:<br />
<blockquote>
<code>
SELECT *<br />FROM namesTable<br />WHERE LEFT(name, 1) IN (‘J’, ‘D’)</code></blockquote>
Which returns all records that have a name starting with J or D.<br />
Now we can put all together:<br />
<blockquote>
<code>
IF EXISTS (SELECT * FROM namesTable WHERE LEFT(name, 1) IN (‘J’, ‘D’))<br />BEGIN<br />SELECT * FROM otherTable<br />END</code></blockquote>
The above example is just to explain the logic: if at least a name in the namesTable starts with ‘J’ or ‘D’ the second statement is executed, retrieving all the data from anothe table (otherTable).<br />
<br />
This is just the beginning, as you may imagine. I leave to your fantasy how to use the above, however, if you want to share your experience just use the comment section below.<br />
In the meantime... happy coding!<br />
<br />
(Thanks to Paolo for the hint!) <div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-50138458152711993952012-12-06T07:00:00.000+01:002012-12-06T07:00:07.262+01:00jQuery: snow effects for Christmas!As I did <a href="http://thewebthought.blogspot.com/2011/11/jquery-javascript-christmas-effects.html" target="_blank">last year</a>, here is a quick collection of <b>Christmas</b> effects. In particular we are talking about snow effects made exclusively with <b>jQuery</b>.<br />
<br />
Ready for the holiday season? Here we go:<br />
<br />
<a href="http://workshop.rs/2012/01/jquery-snow-falling-plugin/" rel="nofollow" target="_blank">jQuery snow falling plugin</a><br />
"Idea is to create one snowflake initially, clone that snowflake at some time interval and add random values for properties for each of them. And it’s done in less than 1kb minifed."<br />
<br />
<a href="http://forrst.com/posts/jQuery_font_flake_snow_flake_experiment-wtG" rel="nofollow" target="_blank">jQuery font flake / snow flake experiment</a><br />
"was bored one night, had an hour charge left in the laptop, challenged myself with this."<br />
<br />
<a href="http://www.somethinghitme.com/2011/10/05/jquery-snowfall-1-5-update-now-with-snow-buildup/" rel="nofollow" target="_blank">jQuery Snowfall 1.5 update now with snow buildup!</a><br />
<br />
<a href="http://jqsnow.sourceforge.net/" rel="nofollow" target="_blank">jQuery Snow</a><br />
"This extension decorates your webpage with falling snow."<br />
<br />
<a href="http://blog.web3canvas.com/2011/12/beautiful-christmas-santa-snow-falling.html" rel="nofollow" target="_blank">Beautiful Christmas Santa Snow Falling Greetings with html5 css3 and jquery</a><br />
"Hey, Still using old Flash Christmas Greetings ? For this Christmas, We are Introducing a Snow Fall Animation with HTML5 CSS3 and Jquery."<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-92207830916164110622012-12-04T07:00:00.000+01:002012-12-04T07:00:11.017+01:00jQuery: get and set information for DOM elements<b>jQuery</b> is a great tool when we need to manipulate elements in our web page.<br />
Today I would like to focus your attention on some useful <b>methods</b> that allow us to get or set information of <b>DOM</b> elements.<br />
We are talking about:<br />
1) <b>.text()</b><br />
2) <b>.html()</b><br />
3) <b>.val()</b><br />
4) <b>.attr() </b><br />
<br />
Let's see them one by one.<br />
<a name='more'></a><span style="color: #6fa8dc;"><b>.text()</b></span><br />
The method allow us to get or set the text of an element.<br />
Considering a div like:<br />
<blockquote>
<code>
<div id="test">This is an example</div></code></blockquote>
we can get the text contained using:<br />
<blockquote>
<code>
$("#test").text()</code></blockquote>
<br />
The same method allows us to set a text inside a container. If the container is not empty, the text inside will be replaced. We can use the method in the following way:<br />
<blockquote>
<code>
$("#test").text("Replaced text inside the container")</code></blockquote>
<span style="color: #6fa8dc;"><b>.html()</b></span><br />
The .html() method works in a similar way. it gets or sets the html content of an element (including the code).<br />
If our container is:<br />
<blockquote>
<code>
<div id="test"><b>This is a bold text</b></div></code></blockquote>
the method:<br />
<blockquote>
<code>
$("#test").html()</code></blockquote>
will get:<br />
<blockquote>
<code>
<b>This is a bold text</b></code></blockquote>
As you may see the <b> tags are included in what we get.<br />
If we want to set html code to an element, using something like:<br />
<blockquote>
<code>
$("#test").html("<i>This is italics</i>")</code></blockquote>
The result will reflect the tags, changing the content of our div from<br />
<blockquote>
<code>
<b>This is a bold text</b></code></blockquote>
to<br />
<blockquote>
<code>
<i>This is italics</i></code></blockquote>
Interesting?<br />
<br />
<span style="color: #6fa8dc;"><b>.val()</b></span><br />
This method allow us to get or set the value of a form field. it works as the other two methods above.<br />
Let's imagine a form containing an input element like<br />
<blockquote>
<code>
<input type="text" id="test" value="Hello!"></code></blockquote>
The method used as:<br />
<blockquote>
<code>
$("#test").val()</code></blockquote>
will get the value of the input box ("Hello!").<br />
If we want to set the value, we can use the method the following way:<br />
<blockquote>
<code>
$("#test").val("Goodbye!")</code></blockquote>
This method is indeed very powerful as you may imagine.<br />
<br />
<span style="color: #6fa8dc;"><b>.attr()</b></span><br />
The last method is used to get or set attribute values.<br />
If we have a link like:<br />
<blockquote>
<code>
<a href="http://thewebthought.blogspot.com" id="test">the web thought</a></code></blockquote>
The following code:<br />
<blockquote>
<code>
$("#test").attr("href")</code></blockquote>
will get:<br />
<blockquote>
<code>
http://thewebthought.blogspot.com</code></blockquote>
while<br />
<blockquote>
<code>
$("#test").attr("href", "http://thewebthought.blogspot.com/p/search.html")</code></blockquote>
will set or change the attribute to the above URL.<br />
<br />
Wow! Just one long sentence to describe all - I'm really impressed!<br />
<br />
Ok, leaving self-indulgence apart... what do you think about the above methods? Aren't they interesting?<br />
please leave your ideas in the comments section below!<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-59884735341859154052012-11-29T07:00:00.000+01:002012-11-29T07:00:11.123+01:00JavaScript & XML: validate an XML documentI think we all know how to use <b>XML</b> documents. For example RSS feeds are basically XML files, as well as sitemaps. Those files may be very important when managing a web site, but those examples are just a small part of the common use of XML documents. Just to make things clear, another example: when you export a Blogger blog, the file you get is an XML file.<br />
When I've written the article on <a href="http://thewebthought.blogspot.com/2011/05/rss-feed-how-to-create-custom-feeds.html" target="_blank">how to create an RSS feed</a>, I discovered a very useful <b>JavaScript</b> snippet that helps us to <b>validate</b> an XML file.<br />
Unfortunately I don't remember where I got it, but, even if I surely rearranged it, if you know the original source, please let me know so that I can give due credit to the author.<br />
Ok, said that, let's see how to do it.<br />
<a name='more'></a><span style="color: #6fa8dc;"><b>The code</b></span><br />
First of all, let's create a form like the following:<br />
<blockquote>
<code>
<form name="form1"><br />
<input type="file" name="file" size="50"><br />
<input type="button" value="Validate" onclick="Validate()"><br />
</form></code></blockquote>
In the input element, we need to insert a valid path to an XML file (it can be local or remote, it doesn't matter).<br />
Then we have a button which will trigger the Validate() function:<br />
<blockquote>
<code>
<script type="text/javascript"><br />
function Validate()<br />
{<br />
var file = document.form1.file.value;<br />
<br />
// create an array in order to check the correct .xml extension in file<br />
var arr_file = file.split(".");<br />
var ext = arr_file[arr_file.length - 1]<br />
<br />
// check if file is not empty - if not alert the user<br />
if (file == "" || file == "undefined" || file.charAt(0) == " ")<br />
{<br />
alert("Please insert a file to check");<br />
}<br />
// check the file extension (.xml) - if not alert the user<br />
else if (ext != "xml")<br />
{<br />
alert("The submitted file is not an XML file");<br />
}<br />
// if everything is ok, then<br />
else<br />
{<br />
// create an XMLDOM<br />
var x = new ActiveXObject("Microsoft.XMLDOM");<br />
<br />
// load the submitted file<br />
x.async = false;<br />
x.load(file);<br />
<br />
// set the XML parser to true<br />
x.validateOnParse = true;<br />
<br />
// check if there are errors<br />
var errore = x.parseError.errorCode;<br />
<br />
// if everything's ok, alert the user<br />
if (errore == 0) <br />
{<br />
res.innerHTML = "No error found";<br />
}<br />
// if errors were found<br />
else<br />
{<br />
// collect error information<br />
var err_n = x.parseError.errorCode;<br />
var err_d = x.parseError.reason;<br />
var err_r = x.parseError.line;<br />
<br />
// show the errors to the user<br />
with (res)<br />
{<br />
innerHTML = "Error number " + err_n + "<br>";<br />
innerHTML += " - " + err_d + "<br>";<br />
innerHTML += "line " + err_r + "<br>";<br />
}<br />
}<br />
// close the parser<br />
x.Close();<br />
}<br />
}<br />
</script></code></blockquote>
I decided to leave the comments in the code itself, so it will be easier to understand what it is actually doing.<br />
Now, you may wonder what <i>res</i> is. Well, it's quite easy: we use a HTML element to show the results of the validation process. So somewhere on the page we need to insert the following:<br />
<blockquote>
<code>
<div id="res"></div></code></blockquote>
That's the place where the results will appear.<br />
<br />
Let me know what you think. <div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com2tag:blogger.com,1999:blog-6718406939865222936.post-68959388381646557462012-11-27T07:00:00.000+01:002012-11-27T07:00:08.224+01:00JavaScript: validate an URLI've already posted an article on how to <a href="http://thewebthought.blogspot.com/2011/12/javascript-validate-forms-with-regular.html" target="_blank">validate forms with Regular Expression</a>. But, have you ever needed to valid an <b>URL</b>?<br />
We can do it quite easily using <b>Regular Expressions</b> and <b>JavaScript</b>. Specifically we are going to use the <b>.test</b> method.<br />
<br />
<span style="color: #6fa8dc;"><b>The code</b></span><br />
The first thing we need to do is set two variables: one is the URL to be validated, the second is the Regular Expression. <br />
<blockquote>
<code>
<script type="text/javascript"><br />
var url = "http://www.google.com/";<br />
var urlCheck = /^http:\/\/(www\.)?[a-zA-Z0-9-]{3,}\.[a-zA-Z]{2,}(\/)?$/;</code></blockquote>
<br />
<a name='more'></a>Now we can check the url using a snippet like:<br />
<blockquote>
<code>
if (urlCheck.test(url) == false)<br />
{<br />
alert("URL is not correct!");<br />
}<br />
else<br />
{<br />
alert("URL correct!");<br />
}<br />
</script></code></blockquote>
According to the URL specified in the <i>url </i>variable, we will receive an alert message: if the url is correct or not.<br />
Now, remember that the above is just an example to show the .test method. Depending on the if clause, we can create different results. For example in a form we can be sure that the submitted url is a valid one and not a fake one. Or anything else.<br />
<br />
Nice and easy.<br />
<br />
Enjoy yourself, and take care.<br />
<br />
Oh! By the way, don't you think it's time to drop a line? So, just use the comments section below!<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-44788745687903044622012-11-22T07:00:00.000+01:002012-11-22T07:00:05.642+01:00JavaScript: document.lastModified with a trickAgain another JavaScript article...<br />
This post in fact might be interesting for some of you. We are talking about those fancy lines we sometimes find at the end of a web page where we are informed about the document last modification date. Something like:<br />
<br />
<script language="javascript">
document.write("<i>Last updated "+document.lastModified+"</i>");
</script>
<br />
How do we do it automatically?
And... that is not an European date, is it? If so, how can we manipulate it in order to make it European?<br />
<br />
<a name='more'></a><span style="color: #6fa8dc;"><b>The code</b></span><br />
The code is once more very simple:<br />
<blockquote>
<code>
<script language="javascript"><br />
document.write("<i>Last updated "+document.lastModified+"<i>");<br />
</script></code></blockquote>
As you can see the output will be:<br />
<blockquote>
<code>
<i>Last updated 11/17/2012 ... ....</i></code></blockquote>
The date is in the format: month/day/year.<br />
We can actually manipulate the output and give it different form by using the following function:<br />
<blockquote>
<code>
function Agg()<br />
{<br />
this.length = Agg.arguments.length;<br />
for (var i=0; i>this.length; i++)<br />
{<br />
this[i + 1] = Agg.arguments[i];<br />
}<br />
}<br />
var gg = new Agg();<br />
gg[0] = "Sunday";<br />
gg[1] = "Monday";<br />
gg[2] = "Tuesday";<br />
gg[3] = "Wednesday";<br />
gg[4] = "Thursday";<br />
gg[5] = "Friday";<br />
gg[6] = "Saturday";<br />
var mm = new Agg();<br />
mm[0] = "January";<br />
mm[1] = "February";<br />
mm[2] = "March";<br />
mm[3] = "April";<br />
mm[4] = "May";<br />
mm[5] = "June";<br />
mm[6] = "July";<br />
mm[7] = "August";<br />
mm[8] = "September";<br />
mm[9] = "October";<br />
mm[10] = "November";<br />
mm[11] = "December";<br />
var dd = new Date(document.lastModified);<br />
with (document)<br />
{<br />
write("Page last update on ");<br />
write(gg[(dd.getDay())], " ");<br />
write(dd.getDate(), " ");<br />
write(mm[(dd.getMonth())], " ");<br />
write(" ", dd.getFullYear());<br />
write(" ");<br />
write(dd.getHours(), ":");<br />
write((dd.getMinutes()<10?'0':'') + dd.getMinutes(), ":");<br />
write((dd.getSeconds()<10?'0':'') + dd.getSeconds());<br />
}</code></blockquote>
And the result will be:<br />
<script>
function Agg()
{
this.length = Agg.arguments.length;
for (var i=0; i>this.length; i++)
{
this[i + 1] = Agg.arguments[i];
}
}
var gg = new Agg();
gg[0] = "Sunday";
gg[1] = "Monday";
gg[2] = "Tuesday";
gg[3] = "Wednesday";
gg[4] = "Thursday";
gg[5] = "Friday";
gg[6] = "Saturday";
var mm = new Agg();
mm[0] = "January";
mm[1] = "February";
mm[2] = "March";
mm[3] = "April";
mm[4] = "May";
mm[5] = "June";
mm[6] = "July";
mm[7] = "August";
mm[8] = "September";
mm[9] = "October";
mm[10] = "November";
mm[11] = "December";
var dd = new Date(document.lastModified);
with (document)
{
write("Page last update on ");
write(gg[(dd.getDay())], " ");
write(dd.getDate(), " ");
write(mm[(dd.getMonth())], " ");
write(" ", dd.getFullYear());
write(" ");
write(dd.getHours(), ":");
write((dd.getMinutes()<10?'0':'') + dd.getMinutes(), ":");
write((dd.getSeconds()<10?'0':'') + dd.getSeconds());
}
</script> <div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com1tag:blogger.com,1999:blog-6718406939865222936.post-50850781304627826122012-11-20T07:00:00.000+01:002012-11-20T07:00:11.301+01:00JavaScript: check the mime type and charsetI always underestimated <b>JavaScript</b>. I know it has been a problem for me, because I've really missed lots of interesting things until I decided to explore the programming language.<br />
In the following article I will show one of the useful things we can do with JavaScript: discover the <b>charset</b> and <b>mime type</b> of a web page.<br />
You might wonder what's the use of it. Well... as usual try to broaden your view and consider the fact that every visitor is visiting your beloved web site from somewhere in the wide world, sitting on a different kind of chair (if not standing or lying), with a different piece of technology or device, and finally (but I could go on forever) with a specific browser ... ... type and version (the mixture of the two is a deadly issue for any web developer).<br />
Ok, said that, don't you think that knowing the mime type and charset of a page might be useful?<br />
Let's see how to do the magic.<br />
<br />
<a name='more'></a><span style="color: #6fa8dc;"><b>The code</b></span><br />
The code is quite simple: we are going to use two properties for the document object: mimeType and defaultCharset.<br />
<blockquote>
<code>
<script type="text/javascript"><br />
var mT = document.mimeType;<br />
var cS = document.defaultCharset;<br />
with (document)
{<br />
write("Mime Type = " + mT);<br />
write("<br>");<br />
write("Charset = " + cS);<br />
}<br />
</script></code></blockquote>
Just put the above in your document and see what comes out.<br />
Now that you know how to get those values, you might image what you can do. For example we can send the user an alert when the two properties are not met by the target browser.<br />
<br />
Ok folks... see ya next time!<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-58126187309713156592012-11-15T07:00:00.000+01:002012-11-15T07:00:02.186+01:00jQuery: cookies!I've already talked about <a href="http://thewebthought.blogspot.com/2010/09/asp-do-you-like-cookies.html" target="_blank">cookies</a>. We explored the way to use them with ASP, but have you ever wondered how to manage them with <b>jQuery</b>?<br />
<br />
This is a very short article because I don't want re-write an already made guide...<br />
We are talking about a jQuery plug-in called <a href="https://github.com/carhartl/jquery-cookie">jquery-cookie</a> which allows us to manage everything about <b>cookies </b>with jQuery.<br />
We will be able to read, create and delete cookie sessions. The plug-in can manage session expiration and it can be configured in order to define a valid path for cookies.<br />
<br />
Just go to the above page and see for yourself...<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-87444793065708426892012-11-13T07:00:00.000+01:002012-11-13T07:00:04.779+01:00SQL Server: import a MS Access databaseAs I wrote in a past article, <b>MS Access</b> can be used to manage databases for a dynamic web site. However, some times, it is not enough and its features can be not enough. In those cases we really need to move to a more performing software like <b>SQL Server</b>.<br />
Especially in situations were large quantities of information are managed by a dynamic web site, SQL Server can be a great solution.<br />
If you are a reader of the web thought, you know how much I am a fan of SQL Server. so in this short post I will explain how to <b>import an Access database to SQL Server</b>... a few steps and we will ready to go.<br />
<br />
<a name='more'></a><span style="color: #6fa8dc;"><b>First things first</b></span><br />
There are two different ways of converting an Access database into a SQL Server database. One is from the MS Access point of view: upsizing a database (export). The other way consists in importing an Access database into SQL Server.<br />
In this article we are going to see the second way, which in my opinion is much more secure and easy to execute.<br />
<br />
<span style="color: #6fa8dc;"><b>Import </b></span><br />
We are going to use the import feature in SQL Server Management Studio. To do so we need to select our database, right click and then select "Tasks/Import Data...".<br />
Doing so, the import wizard will open.<br />
First, select as data source "Microsoft Access". After that, we need to select the Ms Access file name, by pressing browse.<br />
After clicking on the next button, we need to decide where we want to import the database. Destination will be "SQL Server". Select the SQL server name and the database. Now, be careful when completing the dialog box section about user authentication: decide if you want to use Windows or SQL Server authentication.<br />
The next import procedure step is about the way to import data. We can copy data from one or more table or views, or we can write a query to specify the data to transfer. We assume we are going to import data from a table, so we select the first option.<br />
In the next step, we can select the sources by ticking next to the table/s we would like to import.<br />
After clicking on the next button, and after just a moment (or maybe more than a moment depending on the size of the imported table/s), we will find the MS Access tables just inside the Tables section of our SQL Server database.<br />
<br />
Fast and easy.<br />
<br />
<span style="color: #6fa8dc;"><b>A few more tips</b></span><br />
After importing the tables, we need to check if everything went the way we wanted. There are some basic differences between <a href="http://thewebthought.blogspot.com/2011/01/sql-server-vs-ms-access-what-should-i.html" target="_blank">SQL Server and Access</a> that we should be taking into account. The import wizard is a great tool and it should take care of most of the dirty work. A good look at what is now inside SQL Server, before using the database, is advisable in any case.<br />
<br />
Ok folks... that's all for today.<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0tag:blogger.com,1999:blog-6718406939865222936.post-62438783201001160552012-11-08T07:00:00.000+01:002012-11-08T07:00:07.740+01:00jQuery and JavaScript: generate and read a QR CodeHello everybody!<br />
today we are going to see something really interesting that someone in the past asked me via email.<br />
We are going to generate a <b>QR code</b> using a <b>jQuery </b>plug in and then we are going to use a <b>JavaScript</b> library to read the very same QR code.<br />
What do you think, is it interesting enough?<br />
<br />
<a name='more'></a><span style="color: #6fa8dc;"><b>Generate the QR code</b></span><br />
In order to generate the QR code we just need to use a small jQuery plug in called
<a href="http://jeromeetienne.github.com/jquery-qrcode/" rel="nofollow" target="_blank">jquery.qrcode.js</a> which is a <i>"jQuery plugin for a pure browser qrcode generation"</i>.<br />
As explained in the plug in page, the creation of a QR code is pretty straightforward:<br />
1) include the plugin:<br />
<blockquote>
<code>
<script type="text/javascript" src="jquery.qrcode.min.js"></script></code></blockquote>
2) Insert the target container:<br />
<blockquote>
<code>
<div id="qrcode"></div></code></blockquote>
3) Generate the QR code:<br />
<blockquote>
<code>
jquery('#qrcode').qrcode("the web thought");</code></blockquote>
The plug in can render the QR code in canvas or in table.<br />
<br />
<span style="color: #6fa8dc;"><b>Read a QR code</b></span><br />
Reading a QR code is different stuff: we can use <a href="https://github.com/LazarSoft/jsqrcode" rel="nofollow" target="_blank">jsqrcode.js</a>. The idea here is similar to the creation.<br />
We need to include the libraries as explained in the above Github page (see Readme file).<br />
To decode a QR code, we can use the following two lines of code:<br />
<blockquote>
<code>
qrcode.callback = function(data) { alert(data); };<br />
qrcode.decode("qrcodeTest.png");</code></blockquote>
where the qrcodeTest.png is our QR code image that stays in the same folder as the web page containing the above decoding snippet.<br />
The callback function gets from the data parameter the value resulting from the QR code decode process.<br />
Just to make things more clear, have a look at the following code:<br />
<blockquote>
<code>
<script src="jquery.js"></script><br /><script type="text/javascript" src="
QRCode.js"></script><br /><script type="text/javascript"><br />$(document).ready( function() {<br /> qrcode.callback = showInfo;<br /> $("#btnDecode").click(qrCodeDecoder);<br /> })<br /> <br /> function qrCodeDecoder() {<br /> qrcode.decode("qrcodeTest.png")<br /> }<br /> <br /> function showInfo(data) {<br /> alert(data);<br /> }<br /></script><br /></head><br /><body><br /><div><br /><img id="qrcode" src="qrcodeTest.png"/><br /></div><br /><button id="btnDecode>Decode the QR Code</button></code></blockquote>
After including the jQuery and the jsqrcode libraries, we use a button to trigger the call back and the decode of the png file (qrcodeTest.png).<br />
<br />
Ok, guys and gals. That's enough for today.<br />
As usual if you need more info, just drop a line in the comment section below.<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com8tag:blogger.com,1999:blog-6718406939865222936.post-21477164946963915722012-11-06T07:00:00.000+01:002012-11-06T07:00:06.221+01:00JavaScript: dashboards with Drinks ToolkitWeb applications are evolving rapidly. While only a few years ago we just needed to manage basic operation for - as an example - a company's intranet, today, we are asked to create effective and attractive pages together with complex functionalities.<br />
In order to create efficient <b>dashboards</b>, <b>Drinks Toolkit</b> is a really valuable helping tool.<br />
<a href="http://www.goincompany.com/drinks.php" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Drinks" border="0" src="http://3.bp.blogspot.com/-rKtSUXSyedo/UJYU_cogR9I/AAAAAAAAAVw/v6jyQ8DOfxQ/s1600/drinks.jpg" title="Drinks" /></a>It is a "Web-Based widgets to easily develop control panels and dashboards" and it includes a series of widgets each corresponding to a specific tag.<br />
<br />
Drinks is <b>HTML5 </b>powered, using canvas and not needing any Flash.<br />
It uses <b>AJAX </b>to gather data and it is cross browser, as long as the target browser is HTML5 compliant. In terms of simplicity, Drinks is really very easy to use, because in order to insert a widget, we just need to insert the related tag (each widget a tag e.g. <knob>).<br />
Finally it's basically open source, thus free. In fact there are three possible options: the Open Pack which is a "pay what you want (even nothing)" option, the Business Pack for professionals and the Custom Pack (Choose what you need).<br />
Ok, that's all for today. Go to <a href="http://www.goincompany.com/drinks.php" rel="nofollow" target="_blank">Drinks web page</a> and have a look for yourselves.<br />
See you on thursday!<div class="blogger-post-footer">*** Please consider that some live examples may not be properly displayed by your RSS reader. ***</div>Marco Del Cornohttp://www.blogger.com/profile/00863522198118005628noreply@blogger.com0