Learn SASS for CSS

by Koree S. Monteloyola

 

Sass Tutorial for CSS by Tekinoypi

If you have been developing websites for quite some time, I'm sure you have noticed that some of your CSS (Cascading Style Sheets) are getting longer or more complex, which means code maintenance is also getting harder, right?

One way to DRY (Don't Repeat Yourself) in CSS coding is by using Sass (Syntactically Awesome Stylesheets).

I came across Sass because of one of my web development projects for Magento templating is using it by default.

Sass is a stylesheet scripting language that is interpreted by a preprocessor into an ordinary CSS. Some features of Sass are variables, nesting, mixins, partials with imports, control directives, expressions and more.

This article will provide you the basic instructions and examples to help you kickstart learning and using Sass in your web development projects.

Installing Sass

You could either install it through command line or an application. First things first, you should install Ruby before installing the Sass gems.

For Linux

Install Ruby first then execute this command

sudo su -c "gem install sass"

For Windows

Install Ruby first using the RubyInstaller for Windows, follow the commands below to complete Sass installation.

For Mac

Ruby is pre-installed in Mac, follow the commands below to complete Sass installation.

Command Line Sass Installation

  1. Open terminal or command prompt
  2. Execute this command to install Sass
    sudo gem install sass
  3. Check if it is working. You should see Sass's version.
    sass -v

Syntaxes

Sass has 2 syntaxes:

  1. SCSS (Sassy CSS)
    • File extension is *.scss
    • This is actually a CSS3 syntax extension
    • Valid CSS3, means valid SCSS
    • Supports CSS hacks, vendor specific syntax, old IE filter syntax.
  2. SASS
    • File extension is *.sass
    • Uses the older indented syntax, means indentation is preferred vs. brackets
    • Uses newlines, not semi-colons
    • Quicker to write and easier to read

For this article we are going to use the SCSS syntax, which is the preferred/default syntax of Sass.

Your First Sass Project

Create a project folder named "sass-tutorial". Within the "sass-tutorial" folder, create 2 files:

  1. _varsconstants.scss (preceding a file with an underscore means Sass will ignore it and NOT compile it to a CSS file.)
  2. style.scss

Next, open and edit your _varsconstants.scss to add your variables. The variable "$weather" will be used for a Sass Mixin code example, which can be found at the bottom of this tutorial.

$primaryFont: Helvetica, sans-serif; 
$primaryFontColor: #666; 
$percent100: 100%;
$weather: sunny;

Next, open and edit your style.scss to this:

/*
*Partials with Import directive
*/
@import 'varsconstants';


/*
*Variables
*/
body {
  font: $percent100 $primaryFont;
  color: $primaryFontColor; }

Your style.scss demonstrates how to use Partials with Import directive and  Sass variables.

Next, to create a CSS file from SCSS you should open a terminal or command prompt and make sure your current directory is in "sass-tutorial" then execute this command:

sass style.scss style.css

Congratulations! You have just created your CSS file, and it should look like this:

/*
*Partials with Import directive
*/
/*
*Variables
*/
body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

Other Usefull Sass Commands

You can also convert your SCSS files to SASS syntax:

sass-convert style.scss style.sass

and vice versa:

sass-convert style.sass style.scss

You can also watch a folder for changes so it automatically interprets your SCSS file to CSS, just use this code:

sass --watch style.scss:style.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: style.scss
      write style.css
      write style.css.map

Sass also has 4 styles for your CSS output, it can be nested, expanded, compact or compressed. The example below shows how to use the compressed style, which is not meant for human reading.

sass style.scss style.css --style compressed

Using a Sass GUI Appliction: Koala

If you are not comfortable in using Sass through command line, you can use several Sass GUI applications. I've tried using Koala (for Mac) which is an open-source GUI app for Sass, Less and Compass. Here is a screen capture for Koala's interface.

Koala GUI Sass screenshot

 

More Sass Examples: Mixins and if Control Directive

These are just some of the COOL examples that I saw from Sass's documentation and found useful for some of my websites.

Mixins
SCSS

@mixin border-radius($radius) {
 -webkit-border-radius: $radius;
 -moz-border-radius: $radius;
 -ms-border-radius: $radius;
 border-radius: $radius;
}


.box { @include border-radius(10px); }
CSS

.box {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius: 10px; }

if Control Directive
SCSS

p {
 @if $weather == sunny {
  color: blue;
 } @else if $weather == cloudy {
  color: #ccc;
 } @else if $weather == rainy {
  color: #666;
 } @else {
  color: #000;
 }
}
CSS
p {
  color: blue; }

 

For more examples here is a zip file of a SCSS file and its interpreted CSS file for your reference. I hope this tutorial has helped you to understand and integrate Sass to your web projects.

Happy coding!

Category: CSS, Tutorials, Web

How to launch your static website

by Koree S. Monteloyola

 

web development guide iconIn this article I would give you the checklist of the things that you need in order for you to launch your website with static webpages, which mean that there are no server side scripting involved. Your webpages would be coded using HTML, CSS and javascript - if you know how to apply it.

You would save time and money if you transact directly from these providers. Avoid purchasing domains or web hosting services from resellers, because if you do, most likely you will not have full-control over your domain or web hosting settings and configurations, and sometimes it's also more expensive. Spare yourself of these problems and follow my instructions.

Get your domain name.

This is your address on the web, this would be your .com or .edu or .net or .ph. If you want to have the .ph domain, purchase it from the official registrant which is Dot.ph. For the other international top level domains like the .com o .net, you can purchase it from NameCheap.com. You pay for this annually or once a year.

Purchase a web host.

A web host is where you store your files. You pay for this monthly. You can try one of these hosting providers.

OneWebUnit.com is a hosting service provider that is managed by Kairos I.T. Services. Hosting plans are categorized into small, medium, large and custom.The small hosting plan is perfect for students, individuals and organizations to host their microsite or portfolio websites. Price starts at a very affordable price of P500.00. By the way, this hosting provider does not oversell.

Arvixe.com is a good web host provider, they offer several hosting plans for Linux and Windows platforms. After purchasing you would receive an email from them wherein cPanel & FTP login and nameservers are given to you. Use the nameserver to point your domain to your web host. If you need help with this send me an email or use the contact page, and I'll help you to setup your site.

Upload your web pages using an FTP client.

Download FileZilla to transfer or upload your files to your webhost in Arvixe.com. After uploading your files, check it using a browser - choose one: Chrome, FireFox or Internext Explorer. It's better if you'll test your website with all of these browsers to make sure that it is error free.

...and your done.

Are there other options? YES.

If you want to use cloud computing here are some platforms for you.

Google Sites

With Google Sites, you don't need to create your web pages and you don't also have to purchase your web host. Google Sites would provide you an interface for web publishing and they would host your files. Your website would be accessible using a custom URL or link that Google Sites would provide for your site. If you want to point your own domain to this, make sure that you have full control over your DNS configuration/settings. Also, graphical user interface customizations might be limited and can be more complex, so design wise, make sure that your design team knows the limitations of this platform before you execute the design and programming phase.

Students and staff from the academe would want to take advantage of Google Apps for Education, because it's completely free.

Amazon Web Services S3 with Amazon Route 53

AWS S3 allows you to create a bucket and upload your static HTML files to the bucket. Like Google Site's, AWS S3 would also provide you with a customized URL/link, if you want to use your own domain to access your website you should also get Amazon Route S3.


Those are your options in web publishing. Go crazy.

If you need help in web development, go to the contact page, fill out the form and hit send.

Evaluation of 4 Philippine government websites: Project Noah, PHILVOLCS, DPWH and DENR

by Koree S. Monteloyola

 

Last sem, our professor required us to evaluate 4 websites of any Philippine government agency. I chose Project Noah, PHILVOLCS, DPWH and DENR. The criticisms below should be read and understood constructively and not as derogatory comments.

Project Noah

  • URLhttp://noah.dost.gov.ph/
  • 3 Major Functionalities
    • Doppler System Development. Doppler stations of PAGASA give data on the amount of moisture and precipitation over a certain area covered by the Doppler stations. There are 5 Doppler stations in the Philippines, but that is not enough to cover the entire country.
    • Weather Outlook. Right now there is only the tool for “Probability of Rain” but this makes it easy for a normal Filipino to understand graphically what would be the predicted amount of rainfall or weather for a specific area.
    • Graphical rendering. Gathered data from various gauges and sensors are translated to digital form for computer processing. The website shows an interactive (Google) map of the Philippines wherein several tools can be used to plot data coming from various sensors and gauges.
  • 3 Strengths
    • Relays data from automated rain gauges and water level sensors to various social networking sites such as Twitter and Facebook.
    • Doppler is my favorite among these tools since it is accurate and easy to understand. The Doppler’s data is more accurate than the Probability of Rain tool.
    • The system can translate rain intensity and volume measurements in terms of warning and evacuation level alarms.
  • 3 Weaknesses
    • Sophisticated User Interface. Although the system is meant to show scientific data, its target users aren’t only meteorologist or people with higher education. The system is open to all Filipinos and should be easily understandable.
    • Flood reporting and mapping. What’s wrong in this reporting tool is how the data should be inputted. It requires that a person should pin point the location on the Google map. I think that it would be more friendly and accurate if a user types the exact location.
    • Viewing Flood reports. While I do understand the importance of showing the reports over a map. I think it is also with same importance that these reports can be viewed in list view, per town or city.
  • Recommendations
    • User Interface. By default the system shows the map of the Philippines without any Weather Tool applied. Maybe applying the “Probability of Rain” tool by default would save a lot of time and make this system more understandable for first timers. A normal Filipino would instinctively click on any tool to experiment until it makes sense.
    • Improve Flood Reporting Interface. I think that there should be a web form to report floods in a specific area, with the person’s contact info.
    • Downloadable Flood Reports. I think that the local government would benefit from this tool if reports would be available in list view. Records should be sorted according to the towns or cities.

PHIVOLCS

  • URLhttp://www.phivolcs.dost.gov.ph/
  • 3 Major Functionalities
    • The website gives the latest seismic events in the Philippines
    • Serves as an information system for this agency’s services, projects, news, job opportunities, biddings etc.
    •  Provides important geographical information to its target users.
  • 3 Strengths
    • Seismic Bulletins.  The daily report gives the geographical location of the seismic events, time, magnitude and alert level.
    • Hazard Maps. This section contains important geological maps, like fault zones, tsunami prone areas, earthquake induced hazard maps per region.
    • Rich in information. The website contains important information but sadly, it is unorganized.
  • 3 Weaknesses
    • Search function not working. Tried to search for the word “Mayon” and the page returned server error.
    • Urgent links are not in the right place.
    •  Does not utilize the power of the web. PHIVOLCS fails to reach out to the very dynamic Filipino web users, having no social network accounts or does not give updates via Twitter or Facebook.
  • Recommendations
    • User Interface should be enhanced. Confusing navigation structure. There is a topmost menu with 4 links pointing to 4 minor divisions of the website. Below it is the “Main Menu” in the sidebar.
    •  Install Google Webmasters Tools. Installing this “free” tool on the page would crawl all the web pages in the website. Google can give reports on various types of web page errors for maintenance.
    • Urgent links in the header. Urgent links such as seismic events/bulletins should be posted at the header area of the site.
    • Text should be extracted from images. Readable text should be extracted from images for indexing purposes.
    • Interactive maps. Like Project Noah, PHIVOLCS can use open source tools such as Google Maps and Python framework  Django (https://www.djangoproject.com/)

Department of Public Works and Highways

  • URLhttp://www.dpwh.gov.ph/
  • 3 Major Functionalities
    •  The website contains information about the department, process of procurement,  infrastructure projects, employment, FAQs, budgets etc.
    • Posts announcements and monthly status of infrastructure projects
    • Accepts community feedback in different forms (web, sms,landline)
  • 3 Strengths
    • Contact details.The website is gracious in giving contact details on how to reach them or specific personnel, for complaints and feedbacks.
    • Infrastructure Projects Monitoring. This section of the website shows the status of various infrastructure projects in the country. (http://www.dpwh.gov.ph/infrastructure/pms/pmo.asp)
    • Available Information. Rules and regulations, FAQs, instructions, downloadable forms are included on the website.
  • 3 Weaknesses
    • Web page layout. It looks like the website did not go through a planning or design phase.
    • Dead/Broken links.
    • Sections of the site are not present or mismanaged. Sections for emergency management, development services, transportation, water resources, waste management and public building are hard to find.
  • Recommendations
    • Services of a web development team in the Philippines should be acquired. It’s cheap you know.
    • Major sections of the site should be determined.
    • Any dynamic sections of the site like monitoring features should be included in the quick links.
    • Remove unnecessary information. The goal of the website is to serve the public. Do Filipinos need to see that picture on the homepage, sir?

Department of Environment and Natural Resources

  • URLhttp://www.denr.gov.ph
  • 3 Major Functionalities
    • Laws and Policies. This is an interactive section wherein users can search for a key word. The laws and regulations are organized in folders.
    • E-library. Contains publications and searchable directory of books.
    • Internal Concerns. This menu directs employees to internal links like webmail, document tracking system and downloadable forms.
  • 3 Strengths
    • Simple and Friendly. I like the clean and simple look of the site (compared to other govt. websites that I reviewed) It may not embody a Web 2.0 look but it properly represents DENR on the web.
    • E-library. Using the search function gives you a good feeling of using the library’s card catalog to find a book/publication.  The search results provide proper data.
    • Well planned. The web development team of DENR was able to create a proper structure for the website. It is not perfect but I’m sure I didn’t get lost in browsing their site. I know where I should click if I want to find something in their site.
  • 3 Weaknesses
    • Dead/Broken links. The “Priority Programs” section and its submenu are not working.
    • Complaints and Feedback. The site provides a normal contact form. But then again this is not a normal website. The purpose of this site is to serve users online. Maybe they should think on creating a complaints section, where in feedbacks/complaints can be inputted for a specific location.
    • Geological Database and Info Sys. DENR’s Geo-Hazard Mapping and assessment form is not updated. Some fields do not work like location specific queries.
  • Recommendations
    • Issues. Issues about the environment are not posted on the homepage. This would help people understand the current situations in the following areas: air, climate change, emergencies, green living, health and safety, land and clean-up, pesticides, chemicals & toxins, waste and water.
    • Email alerts. In order for Filipinos to have better participation in improving our surroundings maybe newsletter subscription would be a good idea. This would promote awareness on how Filipinos can help.
Note: This is a case study that I submitted for my IS 272 course (Strategic in Info. Sys. Devt.) in UPOU, on Aug. 18 2012.

A good SEO checklist to follow for beginners.

by Koree S. Monteloyola

 
  1. Avoid Meta Keyword stuffing.
  2. Create unique content.
  3. Think of the keywords that your users would type on a search engine to reach your site.
  4. Use Google Adwords's keyword tool to find the appropriate keyword/s (to target) for your site.
  5. Take advantage of the concept of "user generated content" by implementing user reviews or comments and sharing tools for social media websites. User generated content helps to emphasize the title/content of the page without much effort from the web developer or web master (Look mom no hands!) [Read my reflection paper and know the impact of user generated content.]
  6. If you're using a content management system (CMS) like Wordpress, Joomla or Drupal, make sure to upgrade to the latest version, as soon as possible, otherwise your site would be a candidate for hacks.
  7. The main content should be in a good position on your page. Avoid putting ads, widgets, clickable thumbnails before or at the top of the content. These objects should be at the sidebar.
  8. A matching URL and title makes a big difference. Make sure it is not spammy. Keep it simple.
  9. Make your site unique. You don't have to worry in getting a domain that contains a piece of your keyword/s. It's all about the content.
  10. Make people want to link to your site. Create a content that has value, unique, exciting or cool.
  11. Use Google Webmasters tools.
  12. Copied content does not rank highly.
  13. Original content makes people want to return to your site.
  14. Don't use images where text should be in.
  15. Don't give your rankings to others - be careful with web developers / web companies that create your website and put their links at the bottom/footer of your web pages (ex. "Powered by Company Here"). Give value to your site.
  16. Use Google Maps for every content when appropriate.
  17. Observe the keywords that lead your users to your website. Utilize these keywords/web pages to attract more audience.
  18. Make sure that your hosting provider is reliable and has good up-time.
  19. For URLs use dash (-) or periods (.) as separators.
  20. Find ways to make users busy on your site. Post related content in between paragraphs or images, especially on the sidebars. A 5 minute video is short and attractive to a busy person - then multiply that thought to 5 for each person (for another 5 video clips) who visits your site, and you'll know what I mean.
  21. Shorten the meta description. Make sure that it is not cut-off abruptly in the search results.
  22. Implement properly structured and clear breadcrumbs.
  23. Make sure that the character encoding used renders all the special characters correctly.
  24. Avoid rendering inorganic content. Focus on what users/humans like.
  25. Don't put too much text on your site, especially if it's unrelated/spam content.
  26. Don't sweat on creating a good URL. Unique and valuable content is the key. 
  27. Be consistent with the links of each page. Use canonical tags.
  28. Fix broken links and make sure links point to the correct destination.
  29. Track your backlinks. Make sure that your backlinks are not coming from spam sites.
  30. Use valid and appropriate HTML tags.

I am in the process of redesigning my own site, and I think this list is a good guideline for search engine optimization to help me get a higher rank in Google search engine results.

By the way, thanks to Adrian for the Google IO video.

Category: SEO, Web

Be a Technical Woman!

by Koree S. Monteloyola

 

This is a simple Flash animation I created for my (UPOU) DEVCOM 207 course last semester.

The video contains information about the roles of women in the history of computers, current statistics and possible reasons on the status or participation of women in IT and how to encourage women to become computer programmers.

Gender is not an issue if you really want to pursue a career in (information) technology or other related fields.

 

 

 

 

Reference: Wikipedia


Page: 1 2 3