Friday, 16 November 2012

Google API v3 supports unlimited calls, and doesn’t need the complexity of creating keys like the version 2, Bing maps or Yahoo maps.

I have created a small, but useful function to get the Latitude and Longitude of a particular address or postcode. It looks pretty simple, but this is a nice start if you want to build something big with the Google API.

Thursday, 15 November 2012

The box element is one of the most awaited elements in HTML5. It is going to facilitate the task of creating boxes in our web site. At this point we are going to start forgetting border-… with divs or tables and concentrate in a really good implementation called box.

I am going to list all the elements compatible with almost all browsers and add some examples:

display:box : To define an element as a flexbox we set the display to box.

.flexbox {

display: -moz-box;

display: -webkit-box;

display: box;

}

box-orient: Lay out the children of a div element horizontally.

.rule {

-moz-box-orient: vertical;

-webkit-box-orient: vertical;

box-orient: vertical;

}

box-ordinal-group: Specify the display order of the child element of a box, We can reorder elements as we like, using box-ordinal-group.

.box

{

display:-moz-box; /* Firefox */

display:-webkit-box; /* Safari and Chrome */

display:box;

border:1px solid black;

}

.ord1

{

margin:5px;

-moz-box-ordinal-group:1; /* Firefox */

-webkit-box-ordinal-group:1; /* Safari and Chrome */

box-ordinal-group:1;

}

.ord2

{

margin:5px;

-moz-box-ordinal-group:2; /* Firefox */

-webkit-box-ordinal-group:2; /* Safari and Chrome */

box-ordinal-group:2;

}

box-flex: Define two flexible p elements. If the parent box has a total width of 300px, #p1 will have a width of 100px, and #p2 will have a width of 200px. Box-flex allow the content to expand to fill the available space.

div

{

display:-moz-box; /* Firefox */

display:-webkit-box; /* Safari and Chrome */

display:box;

width:300px;

border:1px solid black;

}

#p1

{

-moz-box-flex:3.0; /* Firefox */

-webkit-box-flex:3.0; /* Safari and Chrome */

box-flex:3.0;

border:1px solid red;

}

#p2

{

-moz-box-flex:1.0; /* Firefox */

-webkit-box-flex:1.0; /* Safari and Chrome */

box-flex:1.0;

border:1px solid blue;

}

box-align: Center the child elements of a div box by using the box-align and box-pack properties together.

div

{

width:350px;

height:100px;

border:1px solid black;

/* Firefox */

display:-moz-box;

-moz-box-orient:horizontal;

-moz-box-pack:center;

-moz-box-align:center;

/* Safari and Chrome */

display:-webkit-box;

-webkit-box-orient:horizontal;

-webkit-box-pack:center;

-webkit-box-align:center;

/* W3C */

display:box;

box-orient:horizontal;

box-pack:center;

box-align:center;

}

box-direction: This reverses the order of elements. We can use normal, reverse and inherit.

#main {

-moz-box-direction: reverse;

-webkit-box-direction: reverse;

box-direction: reverse;

}

box-pack: Box-pack controls alignment in the direction set by orient. it centers the child elements of a div box by using the box-align and box-pack properties together.

One of the key features we are going to be using in Windows 8 it is Media Types.

Media Types allows you to set different types of screens of devices. It is really useful to create full accessibility to your site, so for example, if the person which is going to read the site can’t see properly, we can use the tag braille next to @media, in that way, if this person has a special device capable of translating sites into braille, it will work.

Other useful case will be having to deal with mobile devices or especial screens, then we can use handheld or screen and (min-width:480px)

Some other properties can be used for different media types. For example, the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.

Media Types

Media Type

Description

all

Used for all media type devices

aural

Used for speech and sound synthesizers

braille

Used for braille tactile feedback devices

embossed

Used for paged braille printers

handheld

Used for small or handheld devices

print

Used for printers

projection

Used for projected presentations, like slides

screen

Used for computer screens

tty

Used for media using a fixed-pitch character grid, like teletypes and terminals

Wednesday, 14 November 2012

HTML5 has introduced a new paradigm in the save state or save objects world for HTML5. Unfortunately this is not available for all the browsers yet, but it is available for the whole Windows 8 platform, including apps.

There are two types of Web Storage so far, and these are the localStorage, and the sessionStorage. The main difference is that the localStorage persists over different tabs or windows, and even if we close the browser, accordingly with the domain security policy and user choices about quota limit. The antagonist is the sessionStorage object which follows this rule:

When a new HTMLDocument is created, the user agent must check to see if the document's top-level browsing context has allocated a session storage area for that document's origin. If it has not, a new storage area for that document's origin must be created.

Each Document object must have a separate object for its Window's sessionStorage attribute.

sessionStorage object will not persist if we close the tab (top-level browsing context) as it does not exists if we surf via another tab or window. As summary, as soon as we are in our tab the session storage allows us to save a large amount of key/value pairs and lots of text, something impossible to do via cookie. This is what my implementation is trying to do with browsers that do not implement this special object. If you have doubts, you can directly test the demo link, and come back whenever you want.

To create applications which requiere to remember past data localStorage is our object. For other purposes we can use sessionStorage which at the end of the day is like Session in ASP.NET.

Tuesday, 13 November 2012

There are different ways to call a web service in JavaScript, but the best ones are done with AJAX. I have decided to add the same call but with different formats, so you can’t get lost and choose your favourite.

url: Web service addresstype: Protocol, you can choose between GET and POSTtimeout: Who long it is your application waiting for the web service.dataType: Type of data, it could be text , json etc.contentType: The content type you want, ie: "application/json; charset=utf-8",cache: Read example below…datafilter: Read example below…Accepts: Read example below…

METHOD 1

$.ajax({

url: '/sdsd/sdsd',

type: 'GET',

timeout: 1000,

dataType: 'text'

}).done(function (responsetext) {

//do something

}).fail(function () {

//do something

});

METHOD 2

$.ajax({

url: '/sdsd/sdsd',

type: 'GET',

timeout: 1000,

dataType: 'text',

success: function (responsetext) {

//do something

},

error: function (e) {

//do something

}

});

If you don’t specify an error handling jQuery will keep running.

To work with JSON so you can pass data across, JavaScript provides JSON.stringify and JSON.parse.

If you want to send JSON data , you can use something like this (Thanks Bobby):

function InfoByDate(sDate, eDate) {

var divToBeWorkedOn = "#AjaxPlaceHolder";

var webMethod = "http://MyWebService/Web.asmx/GetInfoByDates";

var parameters = "{'sDate':'" + sDate + "','eDate':'" + eDate + "'}";

$.ajax({

type: "POST",

url: webMethod,

data: parameters,

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (msg) {

$(divToBeWorkedOn).html(msg.d);

},

error: function (e) {

$(divToBeWorkedOn).html("Unavailable");

}

});

}

The onreadystatechange event is key in AJAX. This is the only way to monitor what is going on. We have three core properties. Please check the values and the example.

onreadystatechangeStores a function (or the name of a function) to be called automatically each time the readyState property changes

I recently show this question in a what it could be a Microsoft exam, and I think it will be quite useful to try to understand ajax calls, it is based on the accepts and datafilter parameter:

You are developing a web application that retrieves data from a web service. The data being retrieved is a custom binary datatype named bint. The data can also be represented in XML. Two existing methods named parseXml() and parseBint() are defined on the page. The application must:· Retrieve and parse data from the web service by using binary format if possible· Retrieve and parse the data from the web service by using XML when binary format is not possible

You need to develop the application to meet the requirements. What should you do? (To answer, drag the appropriate code segment to the correct location. Each code segment may be used once, more than once, or not at all. You may need to drag the split bar between panes or scroll to view content.)

var request = $.ajax({

uri:'/',

accepts: 'application/bint, text/xml',

datafilter: function(data,type){

if(request.getResponseHeader("Content-Type")=="application/bint")

return parseBint(data);

else

return parseXml();

},

success: function (data) {

start(data);

}

});

Another interesting example is the way you can display on-line stock rates in real time. One of the features we should use to get a time stamp in the header is cache set to false. This will force requested pages not to be cached by the browser. I attach an example:

There is an excellent attribute it is going to help us formatting numbers or any character, very useful for phone numbers by the way. The attribute is called pattern.

The pattern attribute specifies a regular expression against which the control's value, or, when the multiple attribute applies and is set, the control's values, are to be checked.

If specified, the attribute's value must match the JavaScript Pattern production. [ECMA262]

If an input element has a pattern attribute specified, and the attribute's value, when compiled as a JavaScript regular expression with the global, ignoreCase, and multiline flags disabled (see ECMA262 Edition 5, sections 15.10.7.2 through 15.10.7.4), compiles successfully, then the resulting regular expression is the element's compiled pattern regular expression. If the element has no such attribute, or if the value doesn't compile successfully, then the element has no compiled pattern regular expression. [ECMA262]

Constraint validation: If the element's value is not the empty string, and either the element's multiple attribute is not specified or it does not apply to the input element given its type attribute's current state, and the element has a compiled pattern regular expression but that regular expression does not match the entirety of the element's value, then the element is suffering from a pattern mismatch.

Constraint validation: If the element's value is not the empty string, and the element's multiple attribute is specified and applies to the input element, and the element has a compiled pattern regular expression but that regular expression does not match the entirety of each of the element's values, then the element is suffering from a pattern mismatch.

The compiled pattern regular expression, when matched against a string, must have its start anchored to the start of the string and its end anchored to the end of the string.

Note: This implies that the regular expression language used for this attribute is the same as that used in JavaScript, except that the pattern attribute is matched against the entire value, not just any subset (somewhat as if it implied a ^(?: at the start of the pattern and a )$ at the end).

When an input element has a pattern attribute specified, authors should include a title attribute to give a description of the pattern. User agents may use the contents of this attribute, if it is present, when informing the user that the pattern is not matched, or at any other suitable time, such as in a tooltip or read out by assistive technology when the control gains focus.

ie: <label> Part number: <input pattern="[0-9][A-Z]{3}" name="part" title="A part number is a digit followed by three uppercase letters."/> </label>

It will produce the following:

A part number is a digit followed by three uppercase letters.You cannot submit this form when the field is incorrect.

How to create a nice border validation?The best practice for validation logic is to add a red border when the validation has not been done properly. In CSS 3 you can add the valid/invalid into the input element.

For validation you could have the following:input { border: solid 1px;}input:invalid{ border-color: #f00;}input:valid{ border-color: #0f0;}

Monday, 12 November 2012

In this post I am going to add these small things I always forget when I work with JavaScript and are quite useful:

How do you put a message in the browser’s status bar?: windows.status(“hello world”);

What do you use to comment in JavaScript?: // and /* */

What is the correct way to write a JavaScript array?: var txt = new Array (“Hello”,”World”, “how”);

How do you write something with JavaScript?: document.write(“Hello World”);

How does a “while” loop start?: while(i<=10);

What is the purpose of DOM (Document Object Model)?: The DOM represents the structure of a web page. You use it to add dynamic functionality to the page.

DOM core methods to create new objects for a document:

document.createElement(tagname)

document.createTextNode(string)

document.createAttribute(name,value)

document.createDocumentFragment

How do you round a number to the nearest integer?: Math.round(7.25);

How do you find the Maximum number between two numbers?: Math.max(x,y);

How to pass a JavaScript reference into a website: <script type=”text/javascript” src=”alertme.js”></script>

Internet Explorer 6,7 and 8 do not support addEventListener() and removeEventListener(). Use similar attachEvent() and detachEvent() functions instead.Some events in the HTML DOM ‘bubble’ meaning that if the event occurs on an element (and it is or isn’t handled), the event will then also fire on the element’s parent node and then on its grandparent node and so on until the event reaches an element where it may not bubble any further or it reaches the root node. Both addEventListener and removeEventListener have an optional third Boolean parameter indicating whether or not this is the case.

How do you find clients browser name?: navigator.appName

How do you open a new window in JavaScript?:mywindow=window.open(“http://www.google.com”);

How do you split a large string in two lines in Javascript?: document.write(“hello my name is \prince”);

Microsoft implementation of JavaScript is called JScript.

<noscript> tag Alerts the users that your page uses JavaScript, and so the user should enable JavaScript in the browser in order to display your page correctly.

Having the following code what does this code returns….(this is a nice exercise):

<Section>:There is a new kid on the block in HTML5, and that is called <Section>. The <Section> tag has been introduced to make the life easier to the web developers. It is basically a notation, but a really useful and powerful one, especially if it is combined withe the <Article> tag.

The <Section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document. One of the best things about the <Section> Tag, it is the fact it supports all the Globals Attributes in HTML and of course the Event Attributes.

So this:<section> <h6>WWF's Panda symbol</h6> <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p></section>

It will generate:

WWF's Panda symbol

The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.

<Article>:The <Article> tag is much more independent than the section one,self-contained content. An article normally comes embedded into a section.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Potential sources for the <article> element:

Forum post

Blog post

News story

Comment

So this:<article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT.....</p></article>

It will generate:

Internet Explorer 9

Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT.....

WHATWG has become a large community where vendors and users have become key in the project. The Web Hypertext Application Technology Working Group (WHATWG) is a community of people interested in evolving HTML and related technologies. The WHATWG was founded by individuals from Apple, the Mozilla Foundation and Opera Software in 2004.

Since then, the editor of the WHATWG specifications, Ian Hickson, has moved to Google. Chris Wilson of Microsoft was invited but did not join, citing the lack of a patent policy to ensure all specifications can be implemented on a royalty-free basis.

Thursday, 2 August 2012

What apparently could look a piece of cake, deploy a timer job, some times could become a nightmare.

On single farms Timer Jobs are controlled by the SPTimerv4 service which establish all the Timer Jobs on the START. That means, if you deploy a timer job and activate it it will not work until you re start this service

If you are working in a single farm with only one server you should have a mayor problem, but I recommend you to follow these instructions before activating the feature, this is the best installation you can perform:

Create a wsp package in Visual Studio.

Copy the wsp package in the server you want to deploy the Timer Job (for instance c:)

Go to the server were you want to deploy the solution and go to Start->SharePoint 2010 Management Shell

Type Add-SPSolution

It will ask for the identity, just type c:\nameofsolution.wsp

Now let’s go to install it.

Type Install-SPSolution –GACDeployment

it will ask for the identity: just type nameofsolution.wsp

Now type net stop sptimerv4

Now type net start sptimerv4

Now type iisreset

Go to Site Collection Administration->Site Collection Features

Activate the feature.

To Uninstalling the service

Deactivate the feature by going to Site Collection Administration->Site Collection Features

Uninstall-SPSolution -Identity nameofsolution.wsp –allwebapplications

Remove-SPSolution –force

then Type the identity: nameofsolution.wsp

Now type net stop sptimerv4

Now type net start sptimerv4

Now type iisreset

On Multiple farms it is a different issue. For the start you need to synchronize all the clocks so the whole farm can run the Timer Job properly. Only the application pool owners from the particular server where site collection lives will be able to activate the feature. The other way, will be doing it with Enable-SPFeature via Powershell or use the famous stsadm.

Now, having a farm like this:

The first thing we will do is going to the Server 3 (Apps). This server is the one which contains all the services, and we will do the following:

Copy the wsp package in the server you want to deploy the Timer Job (for instance c:)

Go to the server were you want to deploy the solution and go to Start->SharePoint 2010 Management Shell

Type Add-SPSolution

It will ask for the identity, just type c:\nameofsolution.wsp

Now let’s go to install it.

Type Install-SPSolution –GACDeployment

it will ask for the identity: just type nameofsolution.wsp

Now type net stop sptimerv4

Now type net start sptimerv4

(optional) Now type iisreset

Now, for every single server, a apart of of Server 4, do the following:

Go to the server were you want to deploy the solution and go to Start->SharePoint 2010 Management Shell

install-spsolution nameofsolution.wsp -GACDeployment –force

Now type net stop sptimerv4

Now type net start sptimerv4

(optional) Now type iisreset

Go to Site Collection Administration->Site Collection Features and try to activate the feature. If you get an Access Denied, will be because you are in the wrong server, and your app pool identity doesn’t have access to it. I recommend you going to any other server to do it or just type the following from Powershell:

type Enable-SPFeature , and then type the name of the feature.

To remove the Timer Job, I suggest you to disable the feature first and then do the following:

Uninstall-SPSolution -Identity nameofsolution.wsp –allwebapplications

Remove-SPSolution –force

then Type the identity: nameofsolution.wsp

Now type net stop sptimerv4

Now type net start sptimerv4

(Optional) Now type iisreset

Conclusion: Timer Jobs are natural services for Sharepoint and become a really useful tool when you want to perform really complex operations. It is all controlled by Sharepoint so you don’t need to worry about, but only remember, theses steps so you don’t spend more time deploying it than developing.

Tuesday, 17 July 2012

This is the scenario, you are going to Infopath 2010, you go to File->Sharepoint List and when it ask to enter the location of a Sharepoint list, you enter your site and gives you this error: "Unable to connect to the SharePoint site."

The problem is simple, your web application needs a Root site. This is common when you create a site with the wizard so you get http://xxx/sites/mynewsite. What we can it is to create a site for http://xxx/.

How?

Go to Central Administration.

Site Collections->Create site collections.

Select web application where you want to create site collection from the drop down.

Give
a desiredtitle/description and select “/” from the URL drop down. Front
slash stands for a top level site. You will not see it listed in the
drop down if you have already created a top level site
collection because you can only create one top level site collection per
web application.

Step 3Click on web applications and select your “80” website, and on the top left click extend. In this way we are going to extend our site to port 81, so the users are comming from the outside world will use this port. Click on “Extend” and fill the following fields:

Step 4To check the bindings go to Server Manager->Roles->Web Server (IIS)->Internet Information Server.Click on the site we are dealing, in this case will be called . On the right side click on bindings and be sure you receive something similar.

Step 5We are going to change the authentication of the extended site now. Go to Central Administration->Application Management->Manage Web applications select the “80” Web application and click on Authentication Providers. You will receive this dialog, click on Internet.

Step 7Everything is done now…but we have to be sure that our application can be seen in port 81 from the outside world, so let’s go to create a rule in the firewall to do that. Go to Server Manager->Configuration->Windows Firewall with…->Inbound Rules-> Right click –> New Rule. Select Port and click Next. On specific local ports type 81 and click on Next –>Allow connection –> Next –> Domain, Public and private tick it! –>Next –>Type teh name of the rule and finish. Do the same with Outbound Rules.

Thursday, 3 May 2012

This is one of this messages you don't expect, specially when you are trying to restore a backup at 4:00AM in the morning after seeing that the whole farm needs to be rebuilt. The last thing you need at 4:00AM is more problems, just because in four hours the company will start running.

To prevent that I have placed this little post, I hope it will will help.

So why is the "Administration service is stopped. Start the Microsoft SharePoint Foundation Administration 2010 service in order for the operation to continue." is popping up?. Well there is Windows Service called WSSADMIN.exe is used by SharePoint to perform backup/restore operations.

As you probably guessing the service has not been started, so just go to Services in Windows, and find a service called "SharePoint 2010 Administration".

Friday, 6 January 2012

Sometimes you will want to add your own Content Types (custom content types) to your list or document libraries (a list basically…). You can do it with the web interface, it is pretty easy, but what about if you need to perform this for 30,000 sites… you don’t want to spend the rest of the year clicking everywhere.

I have created a function , AddContentTypeToDocumentLibraryRemovingOtherContentType, which allows you to Add a Content Type (“DMSDocument”) and remove the default one (“Documents”). Be aware I will remove “Documents” from my list and add the content type from the site. Whart I am doing here is replacing the default “Document” content type with sophisticated Document content type I developed before called “DMSDocument”

You only need to pass:

Name of the site URL

Name of the Document Library

Name of the Content Type to be added

Name of the Content Type you want to remove from your Document Library.

About Me

I am a dedicated software developer who has been programming since I was 9 years old, when I made my first game in an Amstrad 128kb... after 25 years I keep doing the same stuff with different systems... If you have any problems or you want to contribute to this blog please email me to gabrielrenom@gmail.com

I have been Developing applications for mobile devices since late 90's I am keep dedicated to mobile development working with iPhone, iPad, iTouch , Windows Mobile and Android platforms having my own column in the US magazine i.Business. www.ibusinessmag.com.
Currently working in the legal industry for DWF LLP.