Lost Resort BIZ - The Blog

Develop a memory card game using HTML5, CSS3 and JavaScript

Cristi_N — Tue, 10 Apr 2012 10:13:53 +0000

The goal of this project is to develop a memory-match card game based on the next requirements:

cards used are pairs got from a shuffled deck
give the possibility to replay the game
register the clicks made and the number of the matched pairs

Some CSS3 properties will be used to add some animation to the HTML elements and jQuery framework for the game engine.
This is how the result of the project looks:

Content of the index.html file

This is how the index.html file will look:




	
	Memory-match card game
	
	
	


	
		Memory-match card game
	
	
		You've made 0 clicks and found 0 pair(s).
	
	
		
			
				
				
			
		
		
	
	
	
		This is an example of transitioning cards.

In head meta tag contains the links for the style.css file, for the Sevillana font and for the JavaScript file necessary to add HTML5 specifications (to some extent) for older than ninth version of Internet Explorer

The container with the ID stats will hold the clicks (made) and the pairs (found) values, that will be updated based on user’s actions.

The container with the ID cards contains a child, container with the class “card”, which contains two divs, with classes face front and face back, containers that will be manipulated during the game flow to achieve the desired result.

The container with the ID go-2-nxt.lvl will carry the necessary text which will give the user the option to restart the game (shuffle cards, reset clicks (made) and pairs (found) values).

At the end, before the ending body tag, the necessary JavaScript files are loaded.
Having this we can now style the HTML elements.

Develop a Ping-Pong game using HTML5, CSS3 and JavaScript

Cristi_N — Tue, 15 Nov 2011 09:36:00 +0000

The goal of this project is to develop a ping pong game based on the next requirements:

the game should be played by two human players using the same keyboard
the game must have an options panel to modify the ball speed, the paddle speed and the score limit for game over
the players should have the possibility to start/pause the game

Also, we’ll use CSS3 style properties to style the HTML elements and jQuery framework, to create the game engine.
This is how the result of the project looks:

Files needed

First, we create a folder named pingpong in which the index.html and style.css files will be stored. Inside the pingpong folder another two folders will be created, images which will store the images needed (just a few, for the background) and js where the JavaScript file with the game engine will be placed (and eventually the jQuery library, if no alternative is used). Having these, we can start developing the project.

Content of the `index.html` file

In HTML5 syntax, the Document Type declaration is very simple:

With this the UAs will know that the semantics of HTML5 (and previous versions of HTML) will be used. After this statement we can declare the root element html and its descendents head and body.



Ping Pong Battle  - a game example using HTML5, CSS3 and JavaScript

Inside the head element the title element should come first. After this, some metadata for the page is added: character set, the name of the author, the application’s name used to generate the page etc. The base element allows authors to specify the document base URL for the purposes of resolving relative URLs, and the name of the default browsing context for the purposes of following hyperlinks. The element does not represent any content beyond this information.

A custom font will be used to style some text inside the page, thus the link element which points to a storage location for this custom font-type. After this, the jQuery library is loaded. Note that the JavaScript file with the game engine and a jQuery plugin are loaded after all HTML elements are declared (placed just before the ending body tag), due to the fact that undefined elements are not desired.

The body element will have the following content:


	
		
			Player A: 00To move paddle use W key for going UP and S key for going DOWN.
			
				
					
					Press button to Start the game and use Space bar to Pause the game.
				
			
			Player B: 00To move paddle use UP key for going UP and DOWN key for going DOWN.
		
		
			
				
				
				
				
					The game is paused.
 Click the Start/Resume button to resume the game
				
				
					GAME OVER!
				
				
			
		
		
			
				Ball Speed:  
				Max Score: 
				Paddle Speed:

The container with the ID scoreboard will carry the “Start/Resume game” button and the score (which will be updated dynamically) board for the both players. In HTML5 there is an element named button which can be added to perform some action. Note the attribute type="button" which means that it does nothing if the button is clicked. If this is not specified, the page will be reloaded with every click in an undesirable loop.

The container with the ID playground will have the moving paddle for the players and the generic ball, and the container with the ID saveoptions will carry a form which based on user input will modify the “Ball Speed”, “Paddle Speed” and the value of “Max Score”.

Having this, we can now start developing the game engine.

CSS properties for HTML elements – tips and tricks

Cristi_N — Mon, 24 Oct 2011 08:54:18 +0000

Today, web browsers tend to adhere more accurately to the Web Standards, especially when it comes about CSS properties. CSS3 properties are supported by all web browser engines and with every version released more new properties can be used to style the HTML elements. In this article I’ll try to emphasize some useful approaches which can be used to make your work easier.

Which statement is served first?

A style.css file is nothing more than a text file with (a lot of) statements which define properties for HTML elements. Note, this is the default style sheet file, and the statements are read from top to bottom and from left to right. So, a good approach is to have on top statements for html and body elements, and general properties for other HTML elements (like text-decoration:none for anchor link, or list-style-type:none for unordered or ordered list elements etc.). Keeping things in good order, will save you time from not wasting it.

Which property should come first?

When declaring properties for styling HTML elements I think is better to start with properties that have to do with the position of the element inside the HTML page. So, start with declarations for display, margin, padding and position, and finish with the font characteristics. Also, give a width to the elements like img or the ones who float. With this approach, you’ll avoid loading pages with elements that “struggle” to find their places inside the content.

Which value for measurement unit to use?

When it comes about values for measurement units, is better to use px, a relative unit to the viewing device for style properties like margin, padding, position and width. At least, a pixel has the same dimension in all web browsers’ engine, and the cross-browser differences are not noticeable. For font you can use em to have the height flexible.

Dealing with images and objects

Give a width and a height to the images or the objects you want to be loaded inside the page. With this, you wont see “running” pieces of text finding their places inside the page. Note that, this elements will overflow if their width will exceed the width of their parent element (a div). For avoiding this, is better to set a maximum limit for the element’s width:

img {max-width:100%;height:auto}

With this, the image width will be limited to it’s parent width, and height:auto will set the height to the correct value, preserving the aspect ratio. An object is often the media stream of a movie or a video clip. Setting the same maximum limit as the images have, wont have the same result in all major browser. A solution might be to set the max-width to 100% and the max-height to a maximum value in pixels based on the aspect ratio of the video AND taking into consideration the width of the parent in pixels. More precisely, if you have a container with the width set to 600px, set the max-height of the object to 450px (aspect ratio 4:3).

Classes or IDs?

When you want to style some HTML elements or to manipulate them using JavaScript giving and ID and/or classes to him will help things out. An ID is an unique identifier so, it can be used once per page. A footer, a navigation menu or a main content container should be emphasized by an ID. Classes must be used when more than one element needs to be styled or manipulated. Semantically, is incorrect to use only classes inside a HTML page. But, this approach can be used, because no errors will occur.

Tables or DIVs?

In our days, the trend is to use DIV as a container and to keep separated the style properties for the HTML elements, and make the page layout “tableless”. Anyway, tables are good also, at least when it comes about forms. The elements are aligned better inside a form, when label and input are coming together, if they are placed inside a td element.

Conclusions

A good start, when you develop a website site, with solid knowledge as a foundation for HTML and CSS coding, will keep things clear and easy to understand for further improvements.

Data exploration and sharing

Dorina — Wed, 20 Jul 2011 12:50:07 +0000

I found this article (http://www.fipp.com/Research.aspx?PageIndex=2527&ItemId=15992) very inspiring and therefore I share it with you, the readers of the Lost Resort Blog. I hope you will find the time, strength or team to create similar applications as the one described here, be they for developing your own skills in that field or for the benefit of the community to which you belong or address.

The idea presented in the article and in this post is to create data-based apps that enable users to extract the relevant information for them by using easy-to-use interactive features, and also to share via social network services like Facebook or Twitter the stories that they find through the online data exploration.

In the Ed-data app developed by ProPublica (http://projects.propublica.org/schools/), the analysis allows generating stories about the educational opportunities provided by high schools in the U.S. The educational opportunities are classified into five groups: Advanced Placement course, gifted-and-talented programs, and advanced math, chemistry and physics classes. The data comprises 85,000 schools representing 75% of all public high schoolers in the U.S. The user can get reports for specific schools, districts or states in a visual & interactive presentation of facts such as how many students are enrolled, the percentage of inexperienced teachers (i.e., two-year experience or less), the percentage or students that receive free or reduced-price school lunch (as an indicator of poverty), and the percentage of students attending AP and advanced math courses. Moreover, the user can compare these facts across neighboring schools, or compare to lower and higher poverty-ranked schools, or to specific schools.

In addition to providing easy access to meaningful content, the app also facilitates sharing this content via Facebook. The developers say about the interface of the app that “we were focusing a lot more on what behaviors we wanted to encourage” and that sharing was one of these behaviors. This social aspect of the app was not however designed for its own sake, but to create an impact on both “a personal and a policy level”. Because data analysis is a time-consuming process (that starts with acquiring the data, cleaning it, and then making sense of it), it is important that the obtained information reaches those people that need that information and insight.

Thus, I think this app is a good model to follow for packaging and sharing information that is generated from large amounts of data, and which can be viewed from different perspectives and at different levels of detail based on the user interest.

Fistic – WordPress Template

Cristi_N — Sun, 16 Jan 2011 06:37:38 +0000

This is a free WordPress template released under the GPL v3. The colors used are (most) green (thus the Fistic name) and white and some variations of dark green nuance.

Structure

The header of the page page has 3 (three) areas: first: the title and the description of the blog which float to the right, second the menu: (supports custom menus) and third: a container with a search box floating to the right and a box with a link pointing to login page if user is not logged in and to admin panel if the user is logged in.

The front page has a different layout from single post and single page. It lists the existing post with the following format: on the left the title of the post (permalink to the post), in the middle a thumbnail and on the right the excerpt of the post. The image thumbnail is generated as follows: if the post doesn’t have a featured image, a function generates a random number between 1 and 6 and adds an image from the /template_directory/img/thumbs/ folder if is not a sticky post, and from the /template_directory/img/sticky/ folder if it is a sticky post. See the code bellow:

//Random image for thumbs if don't exist
function random_thumb_post () {
	$templ_dir = get_bloginfo('template_directory');
	$ext = '.png';
	if (!is_sticky()) {
		$thumb_dir = '/img/thumbs/';
	} else {
		$thumb_dir = '/img/sticky/';
	};
	$i=rand(1,6);
	$img[$i]= $templ_dir . $thumb_dir . $i. $ext;
	print '<img class="float-left thumb-img" src="'.$img[$i].'" alt=" " />';
	};

Note that the images are PNGs and you can see how they are displayed on the second page of the front page of this presentation environment.

The single page has the main content floating on the left and a sidebar floating on right. The main content container is split in two, on the right side being the details for the post (time, tags, author) and a box with a list of random post titles (excluding the current one).

The footer area has just a few notes about the copyright notice and a small text about the template’s author.

Gallery

Web browser compatibility

The template was tested on different environments and it displays well on Firefox v3.6, Opera v10.63, Safari v5.0, Chrome v8.0 and Internet Explorer v8.0. Looks good on Internet Explorer v7.0 and more than acceptable on Internet Explorer v6.0.

Known issues

Opera doesn’t know how to render the italicized version of the used font (Neucha). Also, in “Reader made … comments” section on front page, for Linux OSes is seems that the font used (sans-serif) doesn’t fit the text in the container width, so I’ve place the “Nimbus Mono L” before sans serif-font, and it looks a little bit different.

The menu items have images as background. The images also have background color (white). If you use a drop-down menu, in some cases you’ll see white spots over the green background. To some extent, this is acceptable.

New version – 2.10 – release date: 09-Apr-2012

This version has several modifications. By default, the login box placed under the menu does not appear. You have a “Fistic Theme Options” page under Dashboard –> Appearance which will give you the option to display this box or not. Also, in this page, several labels can be modified or translated in other languages.

Another major modification is the way a gallery is displayed (thanks to Chip Bennett). Now is more cleaner and styled.

On front page, the title of each post stays in a box with its height fixed. If the title length exceeds 65 chars, the font size will be reduced substantially. If the title length exceeds 118 chars, the title will be truncated.

On theme options page you have the possibility to set the length (in words) of the posts’ excerpt. The default value is 50 (words) and you can set the value in the interval 10-99 (words).

So far for now. Enjoy it!

DOWNLOAD
source files PREVIEW
live demo

Inspire ideas

Dorina — Wed, 17 Nov 2010 22:25:24 +0000

Hi,

In this category I write about things that I think are useful and interesting to be done. Anyone is welcome to contribute with questions, comments, and suggestions or new thoughts.

My hope is we can bring into light small good thoughts and then we can transform them into reality. For example, one can think of a new function that would be needed in Excel or in other software application. Another example is the wish to see a movie of your favorite book. Any ideas are interesting …

Dorina

Check for pagination of front or archive page in WordPress

Cristi_N — Thu, 11 Nov 2010 09:18:52 +0000

In my WordPress templates, as many others web developers are doing in their own, I put the navigation links for posts on front page or archive type page in a container, styled using CSS properties. There are situations when the container is displayed well, when the pagination links are not present. But, why this container shouldn’t be displayed at all, to preserve a clean appearance of the template?

Check for pagination

The solution is quite simple and doesn’t require a lot of coding to achieve this result. If you take a look at how WordPress Link Template Functions are made you’ll see that one parameter which counts is max_num_pages, which, I presume, stores the value of the maximum page number to navigate through. So, check if this value is greater than 1 (one), and the value returned is true, than, display the pagination links. The following code can be placed before the pagination links’ container:

max_num_pages ; ?>
	 1) : ?>
		//navigation links container here

You don’t need to reset the query. Also I leave this code on two statements just for artistic impression. You can use if ($wp_query->max_num_pages) > 1 only statement as well, the result is the same.

Pencil Draw – WordPress Template

Cristi_N — Thu, 14 Oct 2010 05:35:28 +0000

About the template

The template was created using blue, green and white colors. It has a header area, a main content floating to the right, a sidebar floating to the left and a footer area. The design was built based on what I call a “pencil draw” simulation, used to create the corners of the containers and as background for various inpage elements. The header area has a search form, so the one in the sidebar is not necessary anymore.

The design

The design is not very complicated and/or graphic emphasized. The containers were built using 3 (three) <div> elements which overlap one over another to create the box effect. The DTD used for the HTML code is XHTML 1.0 Transitional. The fonts used for the template are Trebuchet MS and Georgia.

The header area

The header area contains a heading formatted as a link for the name of the blog, and the description of the blog goes under it. Those two elements are placed on the left side. On the right side I placed a search form.
The last element is the menu container. The template supports custom menus as it is emphasized in WordPress codex about wp_nav_menu(). As the documentation says, if no custom menu is defined the function will fallback to wp_page_menu, else if name argument has no value defined or the value defined doesn't match the name of any custom menu defined, the function's name argument will take the name of the first custom menu defined (with the lowest ID). To use any other custom menu you have to manually add the menu name in the functions.php file in the navigation menu section. The menu supports two levels deep navigation (the parent will have children, and the children will have children), which means that the style sheet formats the menu list elements to be displayed. If you want more you have to add the proper formatting for the third level and so on (i.e.: div#menu ul ul ul ...). You have to pay attention to the order the CSS properties are declared, as long as they are served to the HTML page from top to bottom of the style.css.

The main content container

This container floats to the right. The main page file, index.php takes the while loop for the exiting posts and displays the entire content of the posts, not the excerpt. Based on the way the container is created, it was simple to add a conditional statement for the sticky post and with the help of the CSS properties to emphasized it on page. The pages supports wp_link_pages() function which will add links to the next pages of one post, if it is split in more than one parts. Another function used is wp_list_pages() to add a link inside the page to the child pages of the current page. The page.php and single.php pages has the comment form built using the comments_template() function. Also I added a filter to change the messages of the input elements' labels. The template supports nested comments, three levels deep. If you want more, you have to add the proper style properties to achieve the desired effect. The comments made by the administrator and by the author of the post are styled to be displayed different from the other comments. But, you have to modify in the style.css file the statements for the comment-author-administrator class, if your nickname, as it appears in the dashboard of your user admin (or editor) page, is different from administrator, and change it to the nickname you have. Otherwise, no change to the comment style. The comment li elements are not styled differently for even and odd classes. In the next version this will be added.

The template also has a 404.php, a search.php and an archive.php page. If you want to use the archive.php page read how to create an archive page.

The sidebar

The sidebar floats to the left and it supports widgets. By default it has 4 (four) custom widgets defined: Category, Blogroll, Archives (monthly) and Meta. Also in functions.php file has 3 (three) custom widgets declared: Custom Calendar, Custom Search Form and Custom Tag Cloud.

The footer

The footer has 2 functions which will generate a list of 3 (three) links for random posts and 3 (three) links for random pages. These two containers will float to the left, and on the right side are posted credentials for the template's author.

Credits

The template is released under GPL v3 license. You can use it as it is, modify it, for commercial or non-commercial use.

You can DOWNLOAD the template from WordPress site. A LIVE PREVIEW of the template is available also.

Red Shadow WordPress Template

Cristi_N — Wed, 15 Sep 2010 06:41:17 +0000

About the template

Basically it has the backbone of the ~~actual~~ previous template of this blog. But, being developed based on an old WordPress template, requires a lot of code updates to meet the latest major version requirements. Anyway, after a week of reading, writing and designing and after a few more to wait for its approval, now it is ready to be distributed.

The design

The design is not very complicated and/or graphic emphasized. It has four main areas: the header, the main content container, the left sidebar and the footer. The containers were built using 8 (eight) <div> elements which overlap one over another to create the box effect. The style sheet formats almost all HTML elements (the drop-down list and the radio buttons are not, and a few more). Anyway, if you want to make some modifications, go ahead and do it. The DTD used for the HTML code is XHTML 1.0 Transitional. The font used for the main headings is Josefin Sans Std Light. The method used by Google seems to not be supported by old IE versions.

The header area

The header area contains a heading formatted as a link for the name of the blog, and the description of the blog goes under it. Those two elements are placed on the left side. On the right side there are 2 (two) images formatted as links which will give the possibility to your readers to subscribe to your articles using RSS 2 feeds and the Google Feedburner. For the last one you have to edit the header.php file and add the necessary link provided by Google. Maybe, in the near future I'll create a function to make this happened using the Dashboard.

The last element is the menu container. The template supports custom menus as it is emphasized in WordPress codex about wp_nav_menu(). As the documentation says, if no custom menu is defined the function will fallback to wp_page_menu, else if name argument has no value defined or the value defined doesn't match the name of any custom menu defined, the function's name argument will take the name of the first custom menu defined (with the lowest ID). To use any other custom menu you have to manually add the menu name in the functions.php file in the navigation menu section. The menu supports two levels deep navigation (the parent will have children, and the children will have children), which means that the style sheet formats the menu list elements to be displayed. If you want more you have to add the proper formatting for the third level and so on (i.e.: div#menu ul ul ul ...). You have to pay attention to the order the CSS properties are declared, as long as they are served to the HTML page from top to bottom of the style.css.
A snippet of the code is presented bellow.

Important!
In this area you have two icons on the right side. One points to the rss feed link and the other should pointed to you feedburner link. Read more here how to obtain your link. After this you have to edit header.php and add the link in the proper place.

The main content container

This container floats to the left. The main page file, index.php takes the while loop for the exiting posts and displays the entire content of the posts, not the excerpt. Based on the way the container is created, it was simple to add a conditional statement for the sticky post and with the help of the CSS properties to emphasized it on page. Another feature added, if I can say so, was to shrink the message "Enter your password to view comments." which is generated by comments_popup_link() function declared in comment-template.php file on line 973. The problem was if a password protected post exists and the password was not typed and used, instead of displaying "No comments" or "1 Comment" message, the page serve the "Enter your ..." message. This instance is ~~only~~ present in a WPMU environment all WP environment, based on what I experienced. So, shrinking the message assures that it will fit the container's width, otherwise will go under the place should be. The pages supports wp_link_pages() function which will add links to the next pages of one post, if it is split in more than one parts. Another function used is wp_list_pages() to add a link inside the page to the child pages of the current page. The page.php and single.php pages has the comment form built using the comments_template() function. Also I added a filter to change the messages of the input elements' labels. The template supports nested comments, three levels deep. If you want more, you have to add the proper style properties to achieve the desired effect. The comments made by the administrator (or by the main editor) are styled to be displayed different from the other comments. But, you have to modify in the style.css file the statements for the comment-author-administrator class, if your nickname, as it appears in the dashboard of your user admin (or editor) page, is different from administrator, and change it to the nickname you have. Otherwise, no change to the comment style. The comment li elements has different background for even and odd classes.

The template also has a 404.php, a search.php and an archive.php page. If you want to use the archive.php page read how to create an archive page.

The sidebar

The sidebar floats to the right and it supports widgets. By default it has 4 (four) custom widgets defined: Category, Blogroll, Archives (monthly) and Meta. Also in functions.php file has 3(three) custom widgets declared: Custom Calendar, Custom Search Widget and Custom Tag Cloud. Please use the Custom Calendar widget as it is formatted with a different background box.

The footer

The footer has 2 links for RSS feeds and a link for the author of this template. Also it has a simple custom function which will display a Welcome back, user first name user last name message if the user is logged in, or a Login link if the user is not logged in. Anyway, it will be a little change, the message will be formatted as a link to the admin page, in the next version of this template.

Credits

The template is released under GPL v3 license. You can use it as it is, modify it, for commercial or non-commercial use. A thank you message is all that I need, if you get some satisfaction using this template.

You can DOWNLOAD the template from WordPress site. A LIVE PREVIEW of the template is available also.

I hope you'll enjoy it .

Apache Server 2 – Bible

Cristi_N — Mon, 16 Aug 2010 08:28:46 +0000

A book by Mohammed J. Kabir

Structure of the book

The book is structured in six parts, starting from httpd server installation and ending covering the performance and scalability of the Apache Server. Even it was written long time ago, the book still remains a good reading to understand how Apache httpd server runs and how to administrate it for optimal functionality.

Part I: Getting Started

In this part the author explains how to get Apache up and running with minimal changes to the default configuration files so that you can get Apache httpd server up and running on your system as quickly as possible. You can install httpd server on Linux and/or Windows machines.

Part II: Website Administration

This part focuses on typical Web administration tasks such as virtual Web-site creation, user authentication and authorization tasks, monitoring, logging, rewriting and redirecting URLs, proxy service, and the like. You learn a great deal there is to know about creating and managing virtual Web sites. You master various methods of user authentication, authorization, and access control techniques. You learn to monitor Web servers and to customize log files for analysis.

Part III: Running Web Applications

The practice of serving static HTML pages is almost a thing of the past. These days, most popular Web sites have a great deal of dynamic content. People do not visit Web sites that do not change frequently. Therefore, it is important to know how to enable dynamic contents using CGI scripts, Server Side Includes, FastCGI applications, PHP, mod_perl scripts, and Java servlets. This part shows you how to use all of these technologies with Apache.

Part IV: Securing Your Web Site

Ensuring Web site security is a critical part of a Web administrator’s job. In this part, the author discuss the various security issues that can arise with Apache, and how to resolve these issues by using various tools, techniques, and policies or guidelines. He also shows you how to turn your Apache server into a Secure Socket Layer (SSL) – capable Web server using either the mod_ssl or Apache-SSL modules. You are also introduced to the potential risks of running SSI and CGI programs and how to take preventive measures to avoid these risks.

Part V: Running Apache on Windows

As the title says, you will learn hot to install and run Apache on a 32 bits Windows platform. With Apache 2.0, the performance of Apache Web server under this platform has become very promising. I am using too, as a localhost environment and so far so good.

Part VI: Tuning for Performance and Scalability

Like any good application, Apache can be fine-tuned beyond the initial configuration for higher performance.
In this part, the author shows you how to speed up Apache by tuning the configuration, and you will also learn how to create a scalable Web server network using multiple Apache Web server systems.

Conclusions

A comprehensive book about how to install, configure and tweak the Apache httpd server. Examples accompanied the subjects debated. A good start for reading about the Apache httpd Server.

References

The book itself. Well, I did not find any direct link to the official publisher’s site. Wiley is the successor of Hungry Minds, but doesn’t have any records about this book. If you search on Google about the title’s book you’ll even find an electronic format of it.