SASS - Koala

In the post, I would let you know how to use SASS by using an application called Koala.

First of all, Koala is open source so feel free to download from given link below!
http://koala-app.com/

Following the step by step now,

1) Create two folders named css and scss having style.css and style.scss at each as an example.
    ( ** two folders belong to public folder)

2) By using Koala application, upload the public folder.

3) After clicking the "scss/style.scss", click the right button of the mouse and following that, click the "Set Output Path" and it would be appointed to css file which is stored in the css folder.

4) Checked whether option "Auto Compile" is checked or not, Output Style will be "compact" then, click the compile.

5) Now, you can see whenever you write down something on scss file, it would be shown that the code is automatically changed into css file.

URL redirection?

URL redirection also called URL forwarding.

The technology makes a web page available under more than one URL address.

ex) When a browser attempts to open a URL that has been redirected, a page with a different URL is opened.

Similarly, domain redirection or domain forwarding is when all pages in a URL domain are redirected to a different domain, as when wikipedia.com and wikipedia.net are automatically redirected to wikipedia.org

Applying the concept, when users visit the website through own mobile, website may redirect to the website on the mobile version.

Reference 

https://en.wikipedia.org/wiki/URL_redirection

Contact form configuration through "web hosting, FatCow"

If you have an individual website, it may have contact page as well on your website.

I just have configured contact form through my web hosting company, FatCow.

If you are using FatCow, you can have a look the document provided from the website.

Anyway, I am going to list given steps to follow from them.

1) Create <form> tag first - it would be familiar if you have learned basic tags in HTML.

2) Create <input> tag inside of the form 

   <input type="text" name="fullname" size="25">

   In here, name is given with "fullname", which is important because when you receive email from        the contact form later, it would be kind of title. (ex, fullname : junmo)

3) Add the code for default subject line

   

   <input type="hidden" name="subject" value="form submission from %%fullName%%">

   If you add this line on your code, you will receive the email titled "form submission form from JUNMOGU"

   "fullName" is name of field but it is changeable according to your preference.

   

4) For completion or error page after completing the form.

   <input type="hidden" name="thankyou_url" value="yoururl">

   <input type="hidden" name="error_url" value="yoururl">

   

   On value, you need to put your url address. The important thing here is that it is best to use full path names 

   like (http://www.yoursite.com/page.html)

5) Changing the order of your form result.

   When you receive the result of form through email, you can appoint specific order.   

   <input type="hidden" name="order" value="name,email,title">

   Which means I would like to see the result in order, name, email and title.

Reference

https://www.fatcow.com/controlpanel/formEmail.bml

It is available only for users who are the members of FatCow.

When you upload files through FTP, it does not update instantly?

Then, I recommend you hold down the shift key on the keyboard and click the refresh button around the url area!

How to Create a iOS Style Background Blur in Photoshop

Step by step,

1) Prepare your image which is going to have blur effect.

2) Convert the image to Smart Object.

3) Create any shape that is going to have covered with blur effect into the image.
(** Shape color : white)
4) So far, you got 2 layers including the image and the shape. Then, duplicate both of the layers.

5) Select newly duplicated shape layer and give it "fill:50%"

6) Click the topmost image layer(duplicated image) and create clipping mask after clicking right button of your mouse.

7) Click the duplicated image and apply Gaussian Blur effect (I gave it 25 pixels for radius but it depends on the resolution of the document)

8) Click two image layers and link layers after clicking right button of your mouse.


Reference
http://medialoot.com/blog/how-to-create-a-dynamic-ios-7-style-background-blur-in-photoshop/

UI / UX Designer

What is UI / UX Designer?

Basically, UI stands for User Interface and UX for User Experience.

These terms may not familiar with normal people who are not related in Tech world.

It is pretty similar with a website designer as following designing concept.

But, the difference is that the website designer design the simple website, menu, contact page, etc

while UI / UX designer design interactive functions for users as a website application.


For example, one of the customers asked me build a simple website for his restaurant, which website is required simple navigation, menu, picture, etc. It needs to have a website designer. After that, the customer asked me the booking function on the website. Then, it is necessary to design the functions including all the process, which is what UI/UX usually do.

So, we can say that the term of UI/UX designer may include web designer as UI/UX designer is more specialised in the design area.


For more details, please watch the YouTube video attached below.
https://www.youtube.com/watch?v=P6-sedIvt7E

Responsive Youtube Embed

1) Put the code into css file

.video-container {
     position: relative;    
     padding-bottom: 56.25%;    
     padding-top: 30px; 
     height: 0; 
     overflow: hidden;
}

.video-container iframe,.video-container object,.video-container embed {    
     position: absolute;    
     top: 0;    
     left: 0;    
     width: 100%;    
     height: 100%;
}




2) Put the code into html file

<div class="video-container">

         <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>

</div>










Reference - http://avexdesigns.com/responsive-youtube-embed/