Blog Category: Teaching Technology

How to Use Filezilla to Launch a HTML Website

Okay, so now you have written a basic HTML/CSS site, and you want to launch. But, there is only one problem, you have no freaking clue how. Well luckily for you here is a tutorial titled “How to use Filezilla” that shows you how to launch a basic HTML / CSS site onto the interwebs.

There are two ways you can upload your site: FTP and SSH. FTP, or more specifically sFTP, is easier to explain so let’s start there.

Before we begin there are a few basic things you need:

  1. A website domain name
  2. A website host provider
  3. Your host provider login

Your hosting provider will be where you get these items:

  1. FTP host
  2. FTP username
  3. FTP password

All sites need a domain name and host provider. Beginners sometimes think that when you buy your domain name for $9.99 a year at a company like GoDaddy that you are done. Well…. not quite.  You need a hosting package too.

What is hosting? Hosting provides access to a computer (server) that is working 24 hours a day 365 days a year. You “host,” place, your files on this computer (server). The server allows the public to view your files through your domain name.

How does that work? Well, your domain name points to an IP address. IP addresses are like street locations for the internet. For example, milessebesta.com’s IP address is 192.123.456.789 is nearly the same thing as saying Bitwise Industries is located at 700 Van Ness Ave, Fresno, CA 93721.

It gets more and more complicated with DNS and NameServers. Blah blah blah. But I will give you the basic version. When starting out, buy the hosting package first. Why should you purchase the hosting package first? Well, 90% of hosting packages online provide a domain name for free if you host with their company. Only small local businesses don’t usually offer this package deal. Technically you can purchase your domain from a company like Godaddy.com and host at 1and1.com, but don’t do this. As a beginner, it is just more complications and headaches. If you purchase the hosting package and get a domain name with it for free, they will setup the DNS and NameServers correctly for you.

Now hosting, which hosting packages should you use?

First thing, unless you have a developer writing a fancy ASP.net application GET LINUX HOSTING. Hosting companies usually offer two types of basic hosting, Windows or Linux.

You want to choose Linux. Odds are you will eventually migrate to a CMS (Content Management System). Most, CMS systems run off PHP and MYSQL. Yes, you can run PHP and MYSQL on a Windows machine. However, most Linux servers run Apache. And blah blah blah technical stuff… boring… sleep. Linux, technically Apache, allows mod_rewrite. Mod_rewrite allows for pretty URLs on WordPress, which is good. You are lost, just trust me. Get Linux, it is cheaper and allows you to run more.

Note* if you are hosting a simple HTML site, or basic WordPress site, generally you can get away with the cheapest option. You can always upgrade 😉

Here are some of my suggested host providers:

1and1.com (I use this provider)
Hostgator.com
Rackspace.com (Really expensive but insanely wonderful support)
Godaddy.com

I bought hosting, now what?

Having been a web developer for 7+ years, I can tell you the most typical mistake client’s make. When you ask for their FTP information or SSH, they nearly always send the username and password to their host account.

Your login for your host provider is not the same information as your FTP information. The login allows you to get into a place where you create the FTP username and password!

So this is where it get’s tricky. I don’t know what host provider you decided to purchase. There are like a billion out there. But what you need to do is login and figure out how to create an FTP username and password. Most will do this automatically for you. Check the signup email they send fir this info first.

I would suggest Googling “Setting up FTP accounts at [enter host name here]”.

Most decent host providers have support documents that will walk you through this process.

In the end, you need to find, or create, three items:

  1. FTP host (which is a URL or IP address)
  2. FTP username
  3. FTP password

Once you have these items, we can connect to your site.

Finally the real question “How to use Filezilla to launch your website”.

You have your FTP information now we need to connect. To connect we need to download an FTP client. There are lots of different ones out there, some cost money, and some are free. I prefer the free ones. Specifically, I prefer FileZilla, it is open source and stable. The only downside is that it seems like there is always a freaking update.

So to upload your site, there are four steps: Install, Connect, Upload, Check

How to use Filezilla, Step 1: Install FileZilla

How do you install FileZilla?

  1. Go to https://filezilla-project.org/
  2. Click on the button “Download FileZilla Client”
  3. Download and Install
  4. Open up FileZilla

How to use Filezilla, Step 2: Connect via FTP

Now that you have Filezilla open you should see a screen like the one below.

There are two ways to connect: “quick connect” or using the site manager.

Connecting through “Quick Connect”

On the top bar, you should see “Host:,” “Username:,” and “Password.” Place in your FTP information. Don’t worry about port. Add in your Host, Username and Password previously provided by your hosting company. Click the big “Quickconnect” button.

If you are lucky, you will see a bunch of magic happen in the box directly below “Quickconnect” and files appear on the right-hand side where it says “Remote Site.”

Connecting through “Site manager”

The button on the top left allows you to store hundreds of FTP accounts. If you are managing multiple websites, you would want to configure the FTP information using “Site Manager.” Why? “Quick connect” only saves the login credentials for the last 10 FTP accounts you have connected via FileZilla.

Common errors and their meaning

If you see this:

Filezilla Login Error

Then you have the wrong password 🙁

If it is stuck on “Connecting to” then you see this:

Filezilla Connection Error

Your internet is either bad. OR the website is behind a firewall, and the connection is being blocked (this won’t happen with a standard host package). Generally, firewalls issues like this occur with a more advanced host provider.

For a majority of the errors you just need to make sure you entered the information correctly. I would recommend typing in the credentials. NOT copy and paste? Why? Well sometimes when you copy, you accidently grab an empty space before or after an item. FileZilla sees this space and thinks it is a part of the password, username, or host entry. This will cause your site to error.

How to Use FileZilla, Step 3: Upload Your Files

We are almost done! Now we just need to upload your site’s files.

If everything connects, you should see something like the image below. Notice that files loaded under the “remote server” side. You should see “folder” icons. You want to find one that says public_html, or www, or something that sounds website-ish. Double-click on the file to open it.

how to use filezilla

Now find your web files on your desktop. Drag and Drop the files into the website-ish sounding folder. Once this happens, you should see a “Que” pop-up in the bottom of the screen.

Once everything is loaded there should be nothing left in the “Que”.

Final Step Test!

The final step is simple, just load your website page. If it works yay, if not, sorry?

 

Two Geeks Teaching – Brand Mapping

View the Brand Map Herezies.

What the heck is a Brand Map?

The version of the brand map we are working with shown to us from Bertz Rosa. It is a hybrid version of the lean module start-up geared towards designers and creatives. It is a template to learn more about client product’s and expectations for your campaign or website build.
[Read more…]

Tri.be The Event Calendar Custom Shortcodes

Tri.be The Event Calendar Custom Shortcodes

If you are using Tri.be’s WordPress Event Calendar, sometimes you might want to display event information in a page using a shortcode. Unfortunately the plugin doesn’t have this out of the box, but luckily it is easy enough to add.

First go to your themes function.php file and back-it up.

Second paste in the following code:

add_shortcode('event_code', 'events_shortcode');
function events_shortcode() {

	$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
	$upcoming = new WP_Query();
	$upcoming->query( array(
		'post_type'=> 'tribe_events',
		// 'eventDisplay' => 'past',
		'posts_per_page' => 3,
		'paged' => $paged)
	);
	$return_string = '';
	if ($upcoming->have_posts()) :
		while ($upcoming->have_posts()) :
			$upcoming->the_post();
			$return_string .= '<strong><a href="'.get_permalink().'">'.get_the_title().'</a></strong> <br/>';
			$return_string .= tribe_events_event_schedule_details();
			$return_string .= '<br/><br/>';
		endwhile;
		if ( function_exists('wp_pagenavi') ) wp_pagenavi( array( 'query' => $upcoming ) ); // tell it which query we are paginating
	endif;
	wp_reset_query(); // important to reset the query
	$return_string .= '<a href="'.tribe_get_events_link().'">View All Upcoming Events</a>';
	return $return_string;
}

Next go to the page you would like to add the shortcode. On this page add the following.

[event_code]

Save the page, and now you should see some event information. If you would like to view more or less events on the page edit value in the above code. For example, if you want to change from showing 3 events to 2, go to:

'posts_per_page' => 3,

And change the 3 to 2.

'posts_per_page' => 2,

That is it!

If you have any questions please feel free to contact me through the comments section below. Also be sure to checkout my Visalia Web Design services.

Solve PHP Fatal error: Class ‘Mage_Enterprise_Rma_Block
_Adminhtml_Product_Renderer’

Solve PHP Fatal error: Class 'Mage_Enterprise_Rma_Block<br/>_Adminhtml_Product_Renderer'

Here is how to fix the following magento error after down-grading from enterprise to community.

PHP Fatal error: Class ‘Mage_Enterprise_Rma_Block_Adminhtml_Product_Renderer’ not found in /lib/Varien/Data/Form/Abstract.php on line 146

Login to your mysql and execute the following code:


DELETE FROM eav_attribute WHERE `attribute_code` = 'giftcard_amounts';
DELETE FROM eav_attribute WHERE `attribute_code` = 'related_tgtr_position_limit';
DELETE FROM eav_attribute WHERE `attribute_code` = 'related_tgtr_position_behavior';
DELETE FROM eav_attribute WHERE `attribute_code` = 'upsell_tgtr_position_limit';
DELETE FROM eav_attribute WHERE `attribute_code` = 'upsell_tgtr_position_behavior';
DELETE FROM eav_attribute WHERE source_model LIKE 'enterprise_%';
DELETE FROM eav_attribute WHERE backend_model LIKE 'enterprise_%';
DELETE FROM eav_attribute WHERE attribute_code IN ('gift_wrapping_available', 'gift_wrapping_price');

Bingo bango, problem solved

Answer found on stackoverflow
http://stackoverflow.com/questions/13415426/fatal-error-class-mage-enterprise-rma-block-adminhtml-product-renderer-not-fo

OSCommerce Blank Admin Login

I was given the task to upgrade some old oscommerce stores, when I did I noticed an error when trying to reach the admin panel. Here are items I did to fix all the different errors so I could finally sign into the account.


PHP Fatal error: require() [function.require]: Failed opening required '/catalog/includes/classes/action_recorder.php' (include_path='.:') in /catalog/admin/includes/classes/action_recorder.php on line 13

The first error I ran into was a PHP Fatal error because of action_recorder.php, to fix this error make sure your configure.php files are correct. If they are then simply download /catalog/admin/includes/classes/action_recorder.php and /catalog/includes/classes/action_recorder.php from the package, then re-upload them, this got the error to go away for me.

The next error I was receiving was that there wasn’t an administrators table. So I login to phpmyadmin and execute the following…


-- phpMyAdmin SQL Dump
-- version 2.11.9.6
-- http://www.phpmyadmin.net
--
-- Host: localhost:3306
-- Generation Time: Apr 10, 2014 at 02:20 PM
-- Server version: 5.0.77
-- PHP Version: 5.2.6

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Database: `coslair_db1`
--

-- --------------------------------------------------------

--
-- Table structure for table `administrators`
--

CREATE TABLE IF NOT EXISTS `administrators` (
`id` int(11) NOT NULL auto_increment,
`user_name` varchar(255) character set utf8 collate utf8_bin NOT NULL,
`user_password` varchar(60) collate utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=2 ;

--
-- Dumping data for table `administrators`
--

INSERT INTO `administrators` (`id`, `user_name`, `user_password`) VALUES
(1, 'admin', '121212121212');

Once this is done, go to the administrators table in phpmyadmin. Now empty the table. This will make it so that you can add a new username and password, now go to the admin page and create your user and password.

Finally I was getting a too many attempts to login error, to fix this error go to /catalog/admin/includes/login.php

Change this

if ($actionRecorder->canPerform())

To this:

if ($actionRecorder->canPerform() || !tep_not_null($actionRecorder->_module))

This should fix your issues 🙂

Magento MP Survey Change Default Page Layout

I purchased and downloaded MagePage’s MP Survey. I had a client that need more than the default Magento page and survey system. I stumbled upon MagePage.com, which developed MP Survey. This Survey is awesome and did the trick. I might do a review about it at a later date.

Anyway, I ran into an issue where the default page layout was not what I wanted. By default it was 2 column, I just wanted one. After about 30 mins of messing around I was able to make this to my 1-column layout.

Here is what you do. Go to /app/design/frontend/puroast/default/layout

There back up the file survey.xml.

Now open up and edit this file and look for the following:

Add the following right after this tag.







That should fix the issue. You can also apply this after survey_category_view and survey_index_index if you would like.

That sohuld fix it.

Website Design Hanford

website design hanford infographic image enlarged

I love the central valley and with that, I adore Hanford, California. I have many clients that work and live in Hanford. I greatly enjoy bringing the latest and greatest websites to Hanford. Since, I am from Visalia, I think Hanford water is a bit gross but that doesn’t mean I don’t like the people!

My websites focus on increasing sales and leads. With my SEO experience I will design your website to break into new markets. I focus on providing my clients with easy to use websites. All my sites are based on content management systems (CMS). This gives you the ability to update your website without getting charged. If you have a eCommerce store, or need a custom software solution, I can do it ALL! Even, phone applications and mobile design. I enjoy learning about new companies that Hanford has to offer and provide them with a great websites.

My sites are designed to increase sales and take the worry about online marketing off of the companies. It is hard maintaining a well run online marketing strategy, this is why I suggest hiring a professional like me! I have been working as a professional UX Designer and programmer for 7 years.

What does your local Hanford company get my website design?

First I give you an easy to use and maintain web site. I have tons of experience creating content management systems from scratch or using opensource systems like WordPress, Drupal, and Joomla. I avidly code for Magento’s eCommerce System. Check out my blog and you can see all the code I post.

An amazing design to maximize sales and leads.

Whether you are selling to local Hanford clients, or all over the world, I create a design that is wonderful for your clients. I base all my decisions on stastics, feedback, and user data. I believe your success reflects mine.

Great local customer support in Hanford

Being in Visalia, I am only a phone call away. You will never get a foreigner, and will be working with a local professional in Hanford. I enjoy visiting my clients.

If you are in Hanford and want an affordable, professional, website design contact me. I would love to give you a direct quote.

Bxslide Links and Side Navigation

Here is a way to create a dynamic sidebar. The system will count the list items and associate it with the proper slider.

Here is the javascript code.

$.each($('.side-nav li'), function(index, value) {
console.log(index + ':' + value);
$(".story-nav li a").eq(index).addClass('slide-'+index);
});

$('.side-nav li a').click(function(){
var num_id = $(this).attr('class').match(/\d+/); //
event.preventDefault();
slider.goToSlide(num_id);
});

You can then add this html code on your page:

By adding these items, you can create a side navigation that will scroll to the proper slide. You can name the link what ever you want.

Photoshop To CSS | CSS Hat Review

CSS Hat Interface

Costs: $34.99

I am a professional web site developer, mainly a front-end user interface engineer. Most of my day is spent bouncing around photoshop files and sublime text editor, trying to match pixels and recreate mock-up photoshop web sites into working html and css. As most front end developers know, is that this task, without a proper work flow and set of tools, can be daunting, frustrating, and slow. Going from photoshop to css can be a major pain.
[Read more…]

Pages: 1 2

Magento JQuery Product Fade in On Scroll

Want to add a fade in effect through jQuery when users are scrolling to the bottom of the page.

Add the following code to the header of your pages.




Create a code in the js file called script.js. Add the following code.

var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(function() { // when the DOM is ready...
// Fade In function
// Hide Stuff
$j('.products-grid, #products-list li').hide();
tiles = $j(".products-grid, #products-list li").fadeTo(0, 0);
$j('.first').fadeTo(0, 1);

$j(window).scroll(function(d,h) {
tiles.each(function(i) {
a = $j(this).offset().top ;
b = $j(window).scrollTop() + $j(window).height() -100;
if (a < b) $j(this).fadeTo(700,1); }); });}); });

This will make it so that when the bottom of your browser hits the next product it will "fade in" the content. This works best for the products-grid layout.