10 PHP Frameworks For Developers

PHP, known as the most popular server-side scripting language in the world, has evolved a lot since the first inline code snippets appeared in static HTML files. These days developers need to build complex websites and web apps, and above a certain complexity level it can take too much time and hassle to always start from scratch, hence came the need for a more structured natural way of development. PHP frameworks provide developers with an adequate solution for that.

In this post we carefully handpicked 10 popular PHP frameworks that can bestfacilitate and streamline the process of backend web development.

Why Use A PHP Framework

But first, let’s take a look at the top reasons why many developers like to use PHP frameworks and how these frameworks can level up your development process. Here’s what PHP frameworks do:

  • Make speed development possible
  • Provide well-organized, reusable and maintainable code
  • Let you grow over time as web apps running on frameworks are scalable
  • Spare you from the worries about low-level security of a site
  • Follow the MVC (Model-View-Controller) pattern that ensures the separation of presentation and logic
  • Promote modern web development practices such as object-oriented programming tools

1. Laravel

Although Laravel is a relatively new PHP framework (it was released in 2011), according to Sitepoint’s recent online survey it is the most popular framework among developers. Laravel has a huge ecosystem with an instant hosting and deployment platform, and its official website offers many screencast tutorials called Laracasts.

Laravel has many features that make rapid application development possible. Laravel has its own light-weight templating engine called “Blade”, elegant syntax that facilitates tasks you frequently need to do, such as authentication, sessions, queueing, caching and RESTful routing. Laravel also includes a local development environment called Homestead that is a packaged Vagrant box.

2. Symfony

The components of the Symfony 2 framework are used by many impressive projects such as the Drupal content management system, or the phpBB forum software, but Laravel – the framework listed above – also relies on it. Symfony has a wide developer community and many ardent fans.

Symfony Components are reusable PHP libraries that you can complete different tasks with, such as form creation, object configuration, routing, authentication, templating, and many others. You can install any of the Components with the Composer PHP dependency manager. The website of Symfony has a cool showcase section where you can take a peek at the projects developers accomplished with the help of this handy framework.

3. CodeIgniter

CodeIgniter is a lightweight PHP framework that is almost 10 years old (initially released in 2006). CodeIgniter has a very straightforward installation process that requires only a minimal configuration, so it can save you a lot of hassle. It’s also an ideal choice if you want to avoid PHP version conflict, as it works nicely on almost all shared and dedicated hosting platforms (currently requires only PHP 5.2.4).

CodeIgniter is not strictly based on the MVC development pattern. Using Controller classes is a must, but Models and Views are optional, and you can use your own coding and naming conventions, evidence that CodeIgniter gives great freedom to developers. If you download it, you’ll see it’s only about 2MB, so it’s a lean framework, but it allows you to add third-party plugins if you need more complicated functionalities.

4. Yii 2

If you choose the Yii framework you give a boost to the performance of your site as it’s faster than other PHP frameworks, because it extensively uses the lazy loading technique. Yii 2 is purely object-oriented, and it’s based on theDRY (Don’t Repeat Yourself) coding concept, so it provides you with a pretty clean and logical code base.

Yii 2 is integrated with jQuery, and it comes with a set of AJAX-enabled features, and it implements an easy-to-use skinning and theming mechanism, so it can be a great choice for someone who comes from a frontend background. It has also a powerful class code generator called Gii that facilitates object-oriented programming and rapid prototyping, and provides a web-based interface that allows you to interactively generate the code you need.

5. Phalcon

The Phalcon framework was released in 2012, and it quickly gained popularity among PHP developers. Phalcon is said to be fast as a falcon, because it waswritten in C and C++ to reach the highest level of performance optimization possible. Good news is that you don’t have to learn the C language, as the functionality is exposed as PHP classes that are ready to use for any application.

As Phalcon is delivered as a C-extension, its architecture is optimized at low levels which significantly reduces the overhead typical of MVC-based apps. Phalcon not only boosts execution speeds, but also decreases resource usage. Phalcon is also packed with many cool features such as a universal auto-loader, asset management, security, translation, caching, and many others. As it’s awell-documented and easy-to-use framework, it’s definitely worth a try.

6. CakePHP

CakePHP is already a decade old (the first version was released in 2005), but it’s still among the most popular PHP frameworks, as it has always managed to keep up with time. The latest version, CakePHP 3.0 enhanced session management,improved modularity by decoupling several components, and increased the ability of creating more standalone libraries.

CakePHP has a really remarkable showcase, it powers the websites of big brands such as BMW, Hyundai, and Express. It is an excellent tool for creating web apps that need high-level of security, as it has many built-in security features such as input validation, SQL injection prevention, XSS (cross-site scripting) prevention, CSRF (cross-site request forgery) protection, and many others.

7. Zend Framework

Zend is a robust and stable PHP framework packed with a lot of configuration options therefore it’s usually not recommended for smaller projects butexcellent for more complex ones. Zend has partners such as IBM, Microsoft, Google and Adobe. The coming major release, Zend Framework 3 will beoptimized for PHP 7 , but will still support PHP 5.5 onwards.

The current release, Zend Framework 2 also has many cool features such as cryptographic coding tools, an easy-to-use drag and drop editor with support for front-end technologies (HTML, CSS, JavaScript), instant online debugging and PHP Unit testing tools, and a connected Database Wizard. Zend Framework was created with the Agile methodology that facilitates delivering high-quality apps to enterprise clients.

8. Slim

Slim is a PHP micro framework that provides you with everything you need and nothing you don’t. Micro frameworks are minimalistic in design, they areexcellent for smaller apps where a full-stack framework would be an exaggeration. Slim’s creator was inspired by a Ruby micro framework calledSinatra.

Slim is used by many PHP developers for developing RESTful APIs and services. Slim comes with features such as URL routing, client-side HTTP caching, session- and cookie encryption, and it supports “flash” messages across HTTP requests as well. Its User Guide is an easy read, and if you are interested in the new features of the upcoming major release (already in beta), you can watch this primer video about Slim 3.

9. FuelPHP

FuelPHP is a flexible full-stack PHP framework that doesn’t only support the ordinary MVC pattern but also its evolved version, HMVC (Hierarchical Model-View-Controller) at the architecture level. FuelPHP adds an optional classcalled Presenter (formerly called ViewModel) between the Controller and View layers to hold the logic needed to generate Views.

FuelPHP is modular and extendable, takes care of security concerns by providing features such as input and URI filtering and output encoding, and it comes with its own authentication framework, with many other sophisticatedfeatures and a detailed documentation.

10. PHPixie

PHPixie is a quite new framework, it started in 2012 with the goal of creating a high-performance framework for read-only websites. PHPixie also implements the HMVC design pattern just like FuelPHP, and is built by using independentcomponents that can be used as well without the framework itself. The PHPixie components are 100% unit tested, and require minimum dependencies.

The official website has a tutorial that claims you can learn the framework in 30 minutes, and their blog also details many practical use cases. Among the features you can find the standard ORM (object-relational mapping), caching, input validation, authentication and authorization capabilities. PHPixie also allows you to use the HAML markup language, enables schema migration, and has a sophisticated routing system.

Fonte: 10 PHP Frameworks For Developers – Best Of – Hongkiat

SVG Animation with GreenSock Animation Platform (GSAP)

GSAP brings vector images to life using scalable vector graphic (SVG) animations. You can animate a scene, develop HTML5 banner ads, improve project interfaces – the options are endless. My aim is to give you an introduction to GreenSock, the benefits of the platform and how to use it effectively.

To help illustrate how the platform works, I’ve embedded the development of an animation so you can see how we built it. I’ll then show you what the finished element turned out like. I’ve kept it basic on purpose but have provided links to further resources and information if you’re interested.

While you can use GSAP to animate any type of element, my focus is on using it with SVG images as there’s potential to create some awesome animations.

But first, a quick word on SVG images…

If you are unfamiliar with how SVG images and their properties, these two resources will help:

  • Jakob Jenkov has put together a great series of tutorials on his website. He is great at explaining SVG properties and including demos on how to use them.
  • Sara Soueidan writes in-depth articles on SVG for her website, making it easy to understand how it all works. She dives into the properties and provides great reference images.

On to Greensock.

Previously, you might’ve used Flash to animate for the web. But as support for Flash continues to die due to security flaws and lack of browser support, there’s a need for a worthy replacement. SVG has a range of benefits and with growingbrowser support, it makes good sense as a replacement for Flash.

One of the pain points with animating an SVG image is the inconsistencies in how browsers handle these types of images – in particular CSS transforms. Thankfully, this is where a tool such as GreenSock is handy. It solves browser inconsistencies and makes sure everything works as expected.

GSAP is a JavaScript animation library. It has a strong community, thorough documentation, large forums and plenty of demos to help educate you on how the platform works. GreenSock has multiple libraries that specialise in different areas and it’s worth browsing through the list to see what you can use.

Greensock’s performance in the browser is great. It gives you smooth transitions with the GSAP team claiming it’s “20x faster than jQuery” and “faster than CSS3 animations and transitions in many cases”.

If you want to test its performance for yourself, you can run a stress test on the GreenSock website. The test has two variables: the amount of dots animating around the screen; and the JavaScript library used to animate the dots. You can run the animation with different libraries and compare how they perform.

TweenLite is the core animation library for GSAP. It’s small and can be used alongside other GreenSock libraries. It will most likely be all you need for basic SVG animation. TweenMax is a larger library, containing Tweenlite, plus nine other GreenSock libraries. It provides a lot more functionality.

You can build a large animation without Tweenlite but you will find it hard to manage when you enter the editing phase.  This is because when you are animating elements one after another, you will need to set a duration and a delay for each element in your animation. As you tweak an element’s duration, your previously correct delays on other elements will now be too long or too short.  You’ll find yourself spending time re-tweaking delays so it still animates correctly.

GreenSock’s Timeline library comes in handy here, because it solves the above timing issues by completely removing the dependency for delays.  Each element in your stack waits for the previous elements to finish animating before it starts animating. Since the full animation runs in a cascading order you can reorder elements and change durations as you please.

Getting started

In the following examples, we will be using the TimelineMax library because it has more features. You could do these examples with TimelineLite though for a lighter weight version of the plugin.

The first thing to do is create a Timeline instance and store it as a variable. Your animations append to this new timeline. You are not restricted to only one timeline. If your animation was made up of lots of pieces you could createmultiple timelines for each piece and nest them under one master timeline.

var tl = new TimelineMax();

This line of code creates a timeline instance with a bunch of settings that are pre-configured. It’s possible to change the default behaviour, such as having the animation pause upon creation, or changing how many times the animation plays by passing in an object. To learn more about what you can do and how to do it at this point, refer to this documentation.

Animating elements in a timeline is straightforward. Below is an example of how to use the .to() method to change an element’s opacity to zero as it moves 100px on the x axis.

The tl variable we created in the previous step comes first and holds the timeline instance. Inside the to() method, the element to animate is passed in, along with the duration of the animation. After that, you can list anything you want to animate in a comma-separated list.

tl.to(element, duration, {
   x: 100,
   opacity: 0
});

Labels + timing.

Animations will be queued and played in whatever order you list them. They play one after the other, which is expected right? But what if we want to overlap animations, have a delay/pause between animations, or want to run multiple animations at the same time?

One way to achieve this is to add a string to the end of the method containing a time value.

The string will either need to include a += or -= followed by a duration. The += will add in the specified amount of time before it starts animating, creating a delay/pause effect between animations.

The -= will do the opposite, making the elements animation start early, creating an overlap effect between animations. In the first example below, the element waits 0.5 seconds before it starts animating. In the second example, the element starts animating 0.5 seconds before the first element finishes animating.

tl.to(element, duration, {
    x: 100,
    opacity: 0
}, "+=0.5");

tl.to(element, duration, {
    x: 100,
    opacity: 0
}, "-=0.5");

Another way of organising animated elements is to use labels. Labels group elements that you want to animate together in a string. You can name the label anything you choose. Elements with the same label will animate at the same time, rather than playing one after another. Labels can also be appended with += time and -= time if you want to add offsets to an element’s animation. Below are three examples of how you might implement labels in your timeline.

Example 1

tl.to(element, duration, {
    x: 100,
    opacity: 0
}, "myLabel");

Example 2

tl.to(element, duration, {
    x: 100,
    opacity: 0
}, "myLabel+=0.5");

Example 3

tl.to(element, duration, {
    x: 100,
    opacity: 0
}, "myLabel-=0.5");

Easing

Easing changes the rate of speed through an element’s animation. A linear ease will move an element at a constant speed from start to finish. An ease-out ease will start fast and slow down as the animation comes to an end. Adding the correct easing to your animations makes your animation more realistic and a lot better.

GreenSock offers a lot of easing types and offer a great visualiser tool on theirwebsite. If you want to learn more about easing and how it can be used, Ryan Brownhill wrote an article on crafting easing curves for user interfaces. It’s well worth a read and helps to further illustrate this concept.

You can also set the ease for an element’s animation. Below is an example of animating an element’s opacity and assigning a custom ease via the ease property.

tl.to(element, duration, {
    x: 100,
    opacity: 1,
    ease: SlowMo.ease.config(0.5, 0.7, false)
});

When you create a timeline instance, the setup with a default ease is Power1.easeOut. It’s possible to change the default ease with this line of code.

TimelineMax.defaultEase = add easing you want here;

Control

One of my favourite features of Timeline is that your animations are on a timeline and you can add controls. These controls pause, play, resume, reverse and restart the animation. You can build on this functionality to create some pretty cool interactive animations.

Chris Gannon, for example, created this demo to show you how you can scrub through an animation with your mouse. I also really like Adrian Parr’s demo on how to scrub through an animation using an on scroll event.

Key methods

If the information above is too dense for you, these are the fundamentals you need to get started. If nothing else, start attaching these methods to elements to see how they work. It’s also a great cheat sheet for when you’re getting started as these are methods you’ll find yourself using regularly. For an in-depth cheat sheet, check out the one Petr Tichy has put together here.

  • Set() is the equivalent of animating an element with a zero second duration. It alters an element’s appearance or position without any transition.
  • To() animates an element to a state.
  • FromTo() animates an element from one state to another state.
  • StaggerTo() animates a group of elements at the same time but with a staggered start time that you specify.
  • StagerFromTo() is a combination of the above fromTo() and staggerTo().

Helpful methods

In addition to the functionality I’ve provided in this article, I also wanted to briefly highlight three methods that I found helpful in Greensock.

  • Seek() is handy when it comes to tweaking and polishing your animation. It can be time consuming if watching the whole animation over and over. Seek takes either a time or label as its parameter. This means if you just want to view a part of your animation you can pass in a label and it will start from that point.
  • Pause() is great for inspecting what’s happening in your animation. It can be useful to chain this after a Seek call to see how things look.
  • Timescale() speeds up or slows down the overall timeline of your animation. Sometimes it can be hard to dissect an animation when it’s playing at a normal pace. Slowing it down gives you a better insight into how it’s fitting together. Timescale also comes in handy once you have built an animation and want to speed it up or slow it down without going through and tweaking the values.

The finished animation!

Putting all the above examples together, here is the finished animation I built using the tools and methods mentioned here. I encourage you to read the code and comments to see how it fits together.

View the animation on Codepen and play around with it in your browser. Don’t be scared of breaking it – go ahead and edit the code, tweak values and re-order events. Experimenting with the animation will improve your understanding of how it works. If you have any questions, feel free to add them to the comments below – I’m more than happy to try and help you out if I can.

Further resources

If you can’t get enough of GreenSock and want to read more about animating SVG images with it. Check out these links for more information.

Wrapping up

This article is meant to be an introduction to GSAP. I hope you’ve found it useful. Take these foundation ideas and create something simple or make it as intricate as you want. I’ve mentioned in a previous article that Codepen is a great source of inspiration and this is definitely the case for animations.

Here are some of my favourite GSAP animations. I recommend viewing the animations and reading the source code to see how different people create them. Viewing animations at a slower pace will help you get a better look at how it moves and fits together. As I mentioned earlier in the article, we can apply aTimescale to the timeline to slow it down.

After viewing the demos and learning how to animate using GreenSock, I hope you’re inspired to go off and make something of your own.

Post a link to your work in the comments, I’d love to see it. If you are thinking “I want to make something but I can’t think of anything to make”, check out theCodepen Creative Challenge.

It’s a growing community where users create pens around a theme. There are no prizes – it’s all for the fun of it. But it’s a great way to get inspired and to build something, share knowledge and be part of a community. It’s super-cool to see what others come up with.

Happy animating!

Allan gives us a run down of the GreenSock Animation platform and create an awesome animation for this blog article in the process. Check it out!

 

Fonte: SVG Animation with GreenSock Animation Platform (GSAP) | August

Want to learn JavaScript in 2015?

Uma excelente história de Vincent O que durante um ano, focou-se a aprender Javascript, e hoje trabalha nessa área.

Para contar esta história, Vincent utilizou o serviço Medium, website onde podemos contar as nossas histórias num layout simples e amigável.

This is a walk-through of the steps I personally took in a single year, to begin learning JavaScript. My goal was to be able to get a job…

Fonte: Want to learn JavaScript in 2015? — Medium

Tinderesque – building a Tinder-like interface with CSS animations and vanilla JS #justcode

Tinder is a very successful dating app, and one of its features is a way to say yes or no to prospective partners by swiping right or left or pressing a yes or no button. The interface is cards that drop when you press the buttons.

As with any successful interface, a lot of clones that mimick them happen very fast. One of those is FontFlame – a Tinder for Font Pairings. When I saw this one, I thought the animation isn’t right (it just moves to the right or left and fades, there’s no turning or popping up). I tried to fix the CSS animation to match more closely what Tinder is doing, but to my dismay I found out that whilst Fontflame uses CSS animations, they get over-ridden by jQuery ones. I contacted the author and offered my CSS animation to replace the current one.

Just for fun, I packed this up into a quick solution consisting of a CSS animation and some JavaScript to control the voting process.

I called it Tinderesque. You can see it in action, Get the code and read the instructionshow to use it on GitHub.

Here’s some explanations on how Tinderesque works.

THE TINDERESQUE ANIMATION

Animating the cards is no rocket science: we rotate the card after setting the transformation origin to the bottom of the card and shift it up a bit to get a “discard” effect.

First up, we need to define the HTML of the collection of cards we want to vote on. This should be pretty straight forward:

html

To achieve the animation effect we need to give the card we want to animate some dimensions and set its transform origin to its bottom:
.card {
  width: 150px;
  height: 200px;
  display: block;
  background: #666;
  transform-origin: 50% 99%;
}

This ensures that the card doesn’t get rotated around its centre but the bottom instead.

For the positive scenario, we rotate the card clockwise and push it up a bit to get the discard effect. This can be done using a rotate and translateY transformation. We also animate the opacity of the card from 1 to 0, effectively hiding it.

@keyframes yay {
  from {
    transform: rotate(0deg);
    opacity: 1;
  }
  to {
    transform: rotate(40deg) translateY(-80px);
    opacity: 0;
  }
}

For the negative use case, we rotate the card counter-clockwise:

@keyframes nope {
  from {
    transform: rotate(0deg);
    opacity: 1;
  }
  to {
    transform: rotate(-40deg) translateY(-80px);
    opacity: 0;
  }
}

We then trigger these animations by adding and removing classes on the parent elmement of the cards:

.cardcontainer.yes .card {
  animation: yay 0.7s ease-out;
}
.cardcontainer.nope .card {
  animation: nope 0.7s ease-out;
}

GOING THROUGH THE WHOLE CARD DECK

In order to go through the card deck two things must happen:

  • We need to animate the current card using the positive or negative animation
  • When the animation is finished, we need to remove the card from the document and show the next one.

By default, we hide all the cards in the deck. Only the one with the class of current is visible:

.list .card {
  display: none;
}
.list .current {
  display: block;
}

This means that we need to shift the class of current to the next card once this one has been approved or discared. But first, we need to trigger the animation. In order to achieve this, we need either a hover or some clever trickery with checkboxes in CSS. It is more extensible though to use JavaScript.

TRIGGERING THE ANIMATIONS

All we need to trigger the animations is adding an event handler attached to the buttons in the HTML. Depending on which button was pressed we add a yes or nope class to the parent element of the button – in this case, the cardcontainer DIV.

function animatecard(ev) {
  var t = ev.target;
  if (t.className === 'but-nope') {
    t.parentNode.classList.add('nope');
  }
  if (t.className === 'but-yay') {
    t.parentNode.classList.add('yes');
  }
}
document.body.addEventListener('click', animatecard);

We’re using event delegation here with a click handler on the body of the document. We can of course extend this to pointer or touch handlers to allow for touch events and simulating swipe gestures.

ACTING AFTER THE ANIMATION USING EVENTS

Our card has now been animated and is invisible, but it is still in the document and the next card isn’t visible yet. We need to remove the card and shift the current class to the next card in the deck.

Every CSS animation has an animationend event we can use for that. The event gives us the name of the event, which gives us the name of the class to remove.

function animationdone(ev) {
 
  // get the container
  var origin = ev.target.parentNode;
 
  // remove the appropriate class
  // depending on the animation name
  if (ev.animationName === 'yay') {
    origin.classList.remove('yes');
  }
  if (ev.animationName === 'nope') {
    origin.classList.remove('nope');
  }
 
  // if any of the card events have 
  // ended…
  if (ev.animationName === 'nope' ||
      ev.animationName === 'yay') {
 
  // remove the first card in the element
    origin.querySelector('.current').remove();
 
  // if there are no cards left, do nothing
    if (!origin.querySelector('.card')) {
      // no more cards left - 
      // TODO other functionality
    } else {
 
  // otherwise shift the 'current' class to 
  // the next card 
      origin.querySelector('.card').
        classList.add('current');
    }
  }
}
document.body.addEventListener(
  'animationend', animationdone
);

That’s more or less all we need to do. Except that Safari still hasn’t joined us in the year 2015. That’s why we need to repeat both the CSS animation definitions in our CSS with –webkit– prefixes and add an event handler for webkitAnimationEnd. I refuse to do so here, as this is depressing, but you can see it in the tinderesque source code.

EXTENDING THE FUNCTIONALITY USING CUSTOM EVENTS

The functionality now is pretty basic, which means we want to make it as easy as possible to extend it. The simplest way to do that is to add Custom Events that fire when things happen to our card deck. This is as easy as using this function:

function fireCustomEvent(name, payload) {
  var newevent = new CustomEvent(name, {
    detail: payload
  });
  document.body.dispatchEvent(newevent);
}

Custom events can get a payload – you can define what the listener gets as parameters. In the case of tinderesque, the animatecard function has been extended to send a reference to the button that was clicked, its container element (in case you have several decks) and a copy of the current card.

function animatecard(ev) {
  var t = ev.target;
  if (t.className === 'but-nope') {
    t.parentNode.classList.add('nope');
    fireCustomEvent('nopecard',
      {
        origin: t,
        container: t.parentNode,
        card: t.parentNode.querySelector('.card')
      }
    );
  }
  if (t.className === 'but-yay') {
    t.parentNode.classList.add('yes');
    fireCustomEvent('yepcard',
      {
        origin: t,
        container: t.parentNode,
        card: t.parentNode.querySelector('.card')
      }
    );
  }
}

This allows you to read the content of the card before it gets removed from the document.

var b = document.body;
b.addEventListener('nopecard', function(ev) {
  console.log(
    ev.detail.card,
    ev.detail.card.innerHTML
  );
});
b.addEventListener('yepcard', function(ev) {
  console.log(
    ev.detail.card,
    ev.detail.card.innerHTML
  );
});

Tinderesque also fires a custom event called deckempty when the last card got removed from the list. In the demo page this is used to re-stack the deck:

var b = document.body;
b.addEventListener('deckempty', function(ev) {
  var container = ev.detail.container;
  var list = container.querySelector('.cardlist');
  var out = '<li class="card current">#1</li>';
  for (var i = 2; i < 6; i++) {
    out += '<li class="card">#' + i + '</li>';
  }
  list.innerHTML = out;
});

This should get you well on the way to build your own Tinder-like interface. If I find the time, I will record a screencast doing exactly that.

CUTER – A QUICK DEMO USING TINDERESQUE

As a demo, I put together Cuter – a way to say yes or no to cute animal pictures and end up with a list of the ones you chose.
You can see it on YouTube:

https://www.youtube-nocookie.com/embed/6kvDBUTPV74?rel=0

Fonte: Tinderesque – building a Tinder-like interface with CSS animations and vanilla JS #justcode | Christian Heilmann

Customising the OpenCart navigation bar

Learn how to create a customised OpenCart Navigation bar to choose what links your menu contains, no matter the destination!

In this blog we are going to be looking at how to customise the OpenCart navigation bar to show whatever links you want it to show. We will be setting them manually so they can even be to other websites other than the one OpenCart is installed on.

First of all you need to find the file which sets out the navigation menu template which is in the header.tpl file (incidently, for those who don’t know what a .tpl extension is, it just means “Template File”) located at:

  • catalog/view/theme/[YOUR THEME]/template/common/header.tpl

The Quick Way To Add Custom Links To Your OpenCart Nav Bar

Now open up the file in your editor and find the section that looks like:

header

Looks like a bit of a mess but don’t be put off if you’re not that good at PHP just a little bit of HTML will get you adding in your own links. Basically this code is looking through all the product categories in your OpenCart database and adding them to the Nav bar on your website, you just need to get in the middle of that process with your own links!

Towards the end of the section you will need to put a space in the code and add your unique links to be included towards the end of the navigation bar. I have shown an example below:

header02

Connecting OpenCart’s Database to Google Cloud SQL

Learn how to host OpenCart’s database on Google’s infrastructure using the new Cloud SQL service from the Google Cloud Platform for reliability, speed and automatic software patches.

I got an email from the Google Could Platform yesterday telling me that the Cloud SQL engine is now readily available worldwide so I thought I would give it a go and see how difficult it was to move OpenCart’s database to the cloud and run a version of the eCommerce store from Google’s infrastructure. Setting up the clod database and choosing your plan was very easy, where it gets tricky is where we need to import the database which I will give a bit of a guide to although if you are installing OpenCart from scratch it is much easier.

Google Cloud SQL is a newly available service which joins the Cloud Platform family. Using the same infrastructure which is responsible for keeping Google Search and GMail up (they go down so occasionally that people often think it is the end of the world!) developers can run their apps from the cloud which increases reliability, availability, speed and performance by replicating information across multiple databases and protecting against failing hardware which can cause downtime on traditional hosting accounts. You also get the benefit of automatic software patches applied to the MySQL software to cover vulnerabilities and bugs without having to worry about it.

In this blog I will be taking the OpenCart database and placing it into the Google Cloud SQL service. I’ll show you two different ways to do it, both with an existing store and as a new OpenCart installation. Please make sure you grab a copy of your database, if you have one, as you will need it later on in this OpenCart tutorial and make a copy of your account just in case.

Setting up your Google Cloud SQL instance

Kudos to Google for making the process so simple for creating your Cloud Databases although bear in mind you will need to have a registered card on the account before you can go ahead. You simply need to login to your current Google Account and then head over to the Google Developer Console where you will see a list of your projects (if you have any) and clicking the red button in the top left will let you create a new project which we will use for our test OpenCart installation. Just give your project a name and let Google generate a unique, random project ID.

Once that has finished processing, click on the Cloud SQL link in the left hand sidebar then click the red “New Instance” button. Now you will see a simple form to create the MySQL database, we will go through the steps here though just for an extra explanation on what they are for.

Instance ID

Here you can create a unique name which will be used to reference this particular database instance within your project. KEEP IT SECRET!

Region

Choose the default region to keep all of the data stored, the options I have are US and Europe but not sure if that is because I am based in the UK. Choose whichever you is relevant for your store, business and main customer-base.

Tier

This is the section where you can choose the level of resources that your database requires. Since I am just following this as a test, I will choose the lowest tier (D0) but have a word with your developer and web host to see how much your site is currently using to choose the right tier so your not paying too much but have enough power to manage your store. Bear in mind, one of the great things about cloud based databases is that you can change this tier at any point if you need a little extra juice.

Billing Plan

This depends on how busy and resource hungry your site is. For this test I just went with a Pay As You Go pricing model but if you have a lot of visitors you may save money with a billing plan.

Preferred Location

You can use this to choose a zone within your chosen country to keep data closest to your most active users. I left this as No Preference.

Backup Window

Have a look into your Analytics software and decide when the site is least busy and choose a window within that timeframe to perform backups.

Replication

I left this as Synchronous, simply for the reliability factor.

IP Address

For an extra $0.01 an hour you can have a dedicated IP address for your database which you are going to need. OpenCart requires a hostname, or IP Address, to connect to the database so in order to run an OpenCart database from the cloud you will need to have an IP allocated.

Authorised IP Address

You will need the IP address which your website runs on, this means that only your website can access the database, everything else will be rejected. Get in touch with your web host if you don’t know what this is.

Authorised App Engine Applications

This is for developers who have other projects in their developer console so leave this blank unless you know what it is for.

Then click submit and let it process, then you have a brand new MySQL database to use for your OpenCart store. The next step should be to change the root password to something more memorable for you to use, go into the developer console, select your database instance and click “Access Control”, from there you can choose a new root password.

Pointing phpMyAdmin to Google Cloud SQL

By default your webhost will likely have phpMyAdmin installed so you can follow this guide to point your application to use the Google Cloud SQL database instead of your own. Go into your web hosting account file manager and get to the phpMyAdmin config settings by going to the file:

  • phpmyadmin/libraries/config.default.php

Then, find the following variables and change them to your new Cloud Instance using the IP address which Google has assigned your database.

1
2
3
4
5
$cfg['Servers'][$i]['host'] = '[GOOGLE CLOUD SQL IP ADDRESS]';
$cfg['Servers'][$i]['user'] = '[DATABASE USERNAME - DEFAULT ROOT]';
$cfg['Servers'][$i]['password'] = '[DATABASE PASSWORD - YOU HAVE JUST CHANGED THIS]';
$cfg['Servers'][$i]['extension'] = 'mysql';
$cfg['Servers'][$i]['AllowNoPassword'] = false;

OK, so now when you load up phpMyAdmin you will be connected to Google’s Cloud SQL database rather than the default web hosts and you can manage it through phpMyAdmin as you would normally. Bear in mind there are a few restrictions on the commands and privilege settings which shouldn’t affect you too much.

Installing A new Cloud Database-powered OpenCart

OK, in this example we will be assuming that you are installing a brand new OpenCart instance on your server. In which case simply follow the installation instructions as in the step below but make sure to enter the same hostname, username and password that you used in changing the phpMyAdmin config settings.

Then just let OpenCart do it’s thing and it will be using the new Cloud SQL database rather than the localhost one on your web hosting account.

Moving your existing OpenCart installation to use Cloud SQL

So, if you have a currently existing OpenCart store and you simply want to move the database into the cloud, log into your newly configured phpMyAdmin and simply use the database backup you took at the start of this tutorial and import it into your new Cloud SQL database using the import button along the top. Then you will need to edit the Database information inside your OpenCart store so open up your site in FTP and find the following files:

  • config.php
  • admin/config.php

All you need to do then is change the database connection settings (the hostname, username and password) to point towards your new Cloud SQL database rather than the localhost version and then you are good to go! By the way, the database driver is still “mysql” so you can leave that as it is.

Fonte: Connecting OpenCart’s Database to Google Cloud SQL | Cart Advisor

10 Useful WordPress Security Tweaks – Smashing Magazine

 

Security has always been a hot topic. Offline, people buy wired homes, car alarms and gadgets to bring their security to the max. Online, security is important, too, especially for people who make a living from websites and blogs. In this article, we’ll show you some useful tweaks to protect your WordPress-powered blog.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

1. Prevent Unnecessary Info From Being Displayed

The problem
When you fail to log into a WordPress blog, the CMS displays some info telling you what went wrong. This is good if you’ve forgotten your password, but it might also be good for people who want to hack your blog. So, why not prevent WordPress from displaying error messages on failed log-ins?

The solution
To remove log-in error messages, simply open your theme’s functions.php file, and paste the following code:

view source

print?

1
add_filter('login_errors',create_function('$a', "return null;"));

Save the file, and see for yourself: no more messages are displayed if you fail to log in.

Please note that there are several functions.php files. Be sure to change the one in your wp-content directory.

Code explanation
With this code, we’ve added a simple hook to overwrite the login_errors() function. Because the custom function that we created returns only null, the message displayed will be a blank string.

Source

2. Force SSL Usage

The problem
If you worry about your data being intercepted, then you could definitely use SSL. In case you don’t know what it is, SSL is a cryptographic protocol that secures communications over networks such as the Internet.

Did you know that forcing WordPress to use SSL is possible? Not all hosting services allow you to use SSL, but if you’re hosted on Wp WebHost or HostGator, then SSL is enabled.

The solution
Once you’ve checked that your Web server can handle SSL, simply open your wp-config.php file (located at the root of your WordPress installation), and paste the following:

view source

print?

1
define('FORCE_SSL_ADMIN', true);

Save the file, and you’re done!

Code explanation
Nothing hard here. WordPress uses a lot of constants to configure the software. In this case, we have simply defined the FORCE_SSL_ADMIN constant and set its value to true. This results in WordPress using SSL.

Source

3. Use .htaccess To Protect The wp-config File

The problem
As a WordPress user, you probably know how important the wp-config.php file is. This file contains all of the information required to access your precious database: username, password, server name and so on. Protecting the wp-config.php file is critical, so how about exploiting the power of Apache to this end?

The solution
The .htaccess file is located at the root your WordPress installation. After creating a back-up of it (it’s such a critical file that we should always have a safe copy), open it up, and paste the following code:

view source

print?

1
<files wp-config.php>

2
order allow,deny

3
deny from all

4
</files>

Code explanation
.htaccess files are powerful and one of the best tools to prevent unwanted access to your files. In this code, we have simply created a rule that prevents any access to the wp-admin.php file, thus ensuring that no evil bots can access it.

Source

4. Blacklist Undesired Users And Bots

Sm4 in 10 Useful WordPress Security Tweaks

The problem
This is as true online as it is in real life: someone who pesters you today will probably pester you again tomorrow. Have you noticed how many spam bots return to your blog 10 times a day to post their annoying comments? The solution to this problem is quite simple: forbid them access to your blog.

The solution
Paste the following code in your .htaccess file, located at the root of your WordPress installation. As I said, always back up the .htaccess file before editing it. Also, don’t forget to change 123.456.789 to the IP address you want to ban.

view source

print?

1
<Limit GET POST PUT>

2
order allow,deny

3
allow from all

4
deny from 123.456.789

5
</LIMIT>

Code explanation
Apache is powerful and can easily be used to ban undesirable people and bots from your website. With this code, we’re telling Apache that everyone is allowed to visit our blog except the person with the IP address 123.456.789.

To ban more people, simply repeat line 4 of this code on a new line, using another IP address, as shown below:

view source

print?

1
<Limit GET POST PUT>

2
order allow,deny

3
allow from all

4
deny from 123.456.789

5
deny from 93.121.788

6
deny from 223.956.789

7
deny from 128.456.780

8
</LIMIT>

Source

5. Protect Your WordPress Blog From Script Injections

The problem
Protecting dynamic websites is especially important. Most developers always protect their GET and POST requests, but sometimes this is not enough. We should also protect our blog against script injections and any attempt to modify the PHP GLOBALS and _REQUEST variables.

The solution
The following code blocks script injections and any attempts to modify the PHP GLOBALS and _REQUEST variables. Paste it in your .htaccess file (located in the root of your WordPress installation). Make sure to always back up the .htaccess file before modifying it.

view source

print?

1
Options +FollowSymLinks

2
RewriteEngine On

3
RewriteCond %{QUERY_STRING} (\<|%3C).*script.*(\>|%3E) [NC,OR]

4
RewriteCond %{QUERY_STRING} GLOBALS(=|\[|\%[0-9A-Z]{0,2}) [OR]

5
RewriteCond %{QUERY_STRING} _REQUEST(=|\[|\%[0-9A-Z]{0,2})

6
RewriteRule ^(.*)$ index.php [F,L]

Code explanation
Using the power of the .htaccess file, we can check requests. What we’ve done here is check whether the request contains a <script> and whether it has tried to modify the value of the PHP GLOBALS or _REQUEST variables. If any of these conditions are met, the request is blocked and a 403 error is returned to the client’s browser.

Sources

6. Fight Back Against Content Scrapers

The problem
If your blog is the least bit known, people will no doubt try to use your content on their own websites without your consent. One of the biggest problems is hot-linking to your images, which saps your server’s bandwidth.

The solution
To protect your website against hot-linking and content scrapers, simply paste the following code in your .htaccess file. As always, don’t forget to back up when modifying the .htaccess file.

view source

print?

1
RewriteEngine On

2
#Replace ?mysite\.com/ with your blog url

3
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.com/ [NC]

4
RewriteCond %{HTTP_REFERER} !^$

5
#Replace /images/nohotlink.jpg with your "don't hotlink" image url

6
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

Once you’ve saved the file, only your website will be able to link to your images, or, to be more correct, no one would link to your images, because it would be way too complicated and time-consuming. Other websites will automatically display the nohotlink.jpg image. Note that you can also specify a non-existent image, so websites that try to hot-link to you would display a blank space.

Code explanation
With this code, the first thing we’ve done is check the referrer to see that it matches our blog’s URL and it is not empty. If it doesn’t, and the file has a JPG, GIF, BMP or PNG extension, then the nohotlink image is displayed instead.

Source

7. Create A Plug-In To Protect Your Blog From Malicious URL Requests

Sm7 in 10 Useful WordPress Security Tweaks

The problem
Hackers and evil-doers often use malicious queries to find and attack a blog’s weak spots. WordPress has good default protection, but enhancing it is possible.

The solution
Paste the following code in a text file, and save it as blockbadqueries.php. Once you’ve done that, upload it to your wp-content/plugins directory and activate it as you would any other plug-in. Now your blog is protected against malicious queries.

view source

print?

01
<?php

02
/*

03
Plugin Name: Block Bad Queries

04
Plugin URI: http://perishablepress.com/press/2009/12/22/protect-wordpress-against-malicious-url-requests/

05
Description: Protect WordPress Against Malicious URL Requests

06
Author URI: http://perishablepress.com/

07
Author: Perishable Press

08
Version: 1.0

09
*/

10

11
global $user_ID

12

13
if($user_ID) {

14
if(!current_user_can('level_10')) {

15
if (strlen($_SERVER['REQUEST_URI']) > 255 ||

16
strpos($_SERVER['REQUEST_URI'], "eval(") ||

17
strpos($_SERVER['REQUEST_URI'], "CONCAT") ||

18
strpos($_SERVER['REQUEST_URI'], "UNION+SELECT") ||

19
strpos($_SERVER['REQUEST_URI'], "base64")) {

20
@header("HTTP/1.1 414 Request-URI Too Long");

21
@header("Status: 414 Request-URI Too Long");

22
@header("Connection: Close");

23
@exit;

24
}

25
}

26
}

27
?>

Code explanation
What this code does is pretty simple. It checks for excessively long request strings (more than 255 characters) and for the presence of either the eval or base64 PHP functions in the URI. If one of these conditions is met, then the plug-in sends a 414 error to the client’s browser.

Source

8. Remove Your WordPress Version Number… Seriously!

The problem
As you may know, WordPress automatically displays the version you are using in the head of your blog files. This is pretty harmless if your blog is always up to date with the latest version (which is certainly what you should be doing anyway). But if for some reason your blog isn’t up to date, WordPress still displays it, and hackers will learn this vital piece of information.

The solution
Paste the following line of code in the functions.php file of your theme. Save it, refresh your blog, and voila: no more WordPress version number in the header.

view source

print?

1
remove_action('wp_head', 'wp_generator');

Code explanation
To execute certain actions, WordPress uses a mechanism called “hooks,” which allow you to hook one function to another. The wp_generator function, which displays the WordPress version, is hooked. We can remove this hook and prevent it from executing by using the remove_action() function.

Source

9. Change The Default “Admin” Username

Sm9 in 10 Useful WordPress Security Tweaks

The problem
Brute force is one of the easiest ways to break a password. The method is simple: try as many different passwords as possible until the right one is found. Users of the brute force method use dictionaries, which give them a lot of password combinations.

But knowing your username certainly makes it easier for them to guess the right combination. This is why you should always change the default “admin” username to something harder to guess.

Note that WordPress 3.0 let you choose your desired username by default. Therefore, this tip is still usefull if you still use the old “admin” account from older WordPress versions.

The solution
If you haven’t changed the “admin” username yet, simply run the following SQL query to your database to change it for good. Don’t forget to specify your desired username.

view source

print?

1
UPDATE wp_users SET user_login = 'Your New Username' WHERE user_login = 'Admin';

Code explanation
Usernames are stored in the database. To change one, a simple UPDATE query is enough. Note that this query will not transfer posts written by “admin” to your new username; the source post below shows you how to easily do that.

Source

10. Prevent Directory Browsing

The problem
By default, most hosts allow directory listing. So, if you type http://www.yourblog.com/wp-includes in the browser’s address bar, you’ll see all of the files in that directory. This is definitely a security risk, because a hacker could see the last time that files were modified and access them.

The solution (Updated)
Just add the following to the Apache configuration or your .htaccess file:

view source

print?

1
Options -Indexes

Code explanation
Please note that it’s not enough to update the blog’s robots.txt file with Disallow: /wp*. This would prevent the wp-directory from being indexed, but will not prevent users from seeing it.

Source

SXO a evolução do SEO ou um complemento?

O SXO (Search eXperience Optimization) tem sido cada vez mais utilizado no universo Web. Há quem afirme até que o SEO está a caminhar para a extinção. E porquê? Porque o SEO (na grande maioria das vezes) apenas se baseia em melhorar os resultados nas pesquisas pelos motores de pesquisa, deixando por vezes outros pormenores muito importantes “esquecidos”.

Na minha opinião o SXO é um “complemento”.

O SXO baseia-se (tal como o próprio nome indica) na otimização da experiência do utilizador quando navega num website.

Um exemplo simples é a página com o erro “404 – Not Found”.

O SEO pode ser fantástico, mas se depois a experiência do utilizador no website não for a mais positiva, todo o trabalho desenvolvido em SEO não servirá para nada.

Imagine que clica numa página nos resultados de um motor de pesquisa e é redirecionado para uma página “inexistente”. Esta situação é má para SEO, mas é ainda pior para o utilizador. O que acontece? O utilizador provavelmente volta aos resultados de pesquisa e escolhe outro website!

Outro exemplo, que infelizmente é bastante recorrente, é a utilização de produtos sem descrição, imagem e informações adicionais numa loja online (por exemplo). Logo, por muito bom que seja o trabalho SEO, se o utilizador não reconhece qualquer valor acrescentado no website que acaba de visitar certamente não voltará, escusado será dizer que neste caso nem com o “melhor” SEO haveria bons resultados.

Search eXperience Optimization

Embora apenas tenha mudado uma palavra – ‘engine’ para ‘experience’ o SXO fornece uma visão muito diferente. Aqui estão quatro maneiras de focar/melhorar a experiência que dá aos seus visitantes/compradores, e, finalmente, o valor que ele dá ao seu negócio:

1. O utilizador como “centro” do seu negócio online

Não se esqueça que será uma pessoa e não uma máquina a comprar seja o que for no seu website/loja. Com isto queremos dizer que deve verificar se o tipo de linguagem que utiliza no website/loja está efetivamente enquadrada com o utilizador final.

Se fizer esse pequeno procedimento, irá certamente associar melhor as palavras chave que identificam o que pretende vender. Se o conteúdo é verdadeiramente valioso, terá cada vez mais visitas e com isso mais relevância para classificação nos motores de pesquisa.

Lembre-se, quem pesquisa são pessoas, não os motores de pesquisa.

2. Alinhar com os objetivos dos administradores

Muito provavelmente, o termo SEO não é associado com tanta importância como um objetivo estratégico por parte dos administradores das empresas.
Contudo, a “experiência do cliente” já o será. Cada vez mais os administradores pretendem não só angariar novos clientes, como também fidelizar os existentes. Para que isso seja possível ter uma experiência de qualidade em todas as fases de um relacionamento comercial é fundamental.

Ter um website/loja que cative os clientes poderá ser um excelente início para uma relação comercial.

3. Alinhar com a equipa de desenvolvimento WEB

No desenvolvimento de soluções web, sobretudo aquelas que terão uma forte interação com o utilizador final, o SXO deve estar o mais presente possível. É fundamental que todos os envolvidos no processo de desenvolvimento estejam focados na experiência do utilizador (UX – User eXperience). O importante é que os utilizadores encontrem a informação correta e de fácil acesso. Ninguém gosta de procurar “eternamente” informação num website!

4. Alinhamento estratégico da pesquisa orgânica ou paga

SEO, SEA, PPC, SEM. Quem se importa? O mais importante é “dar” ao utilizador aquilo que ele realmente procura. Claro que é importante ter excelentes resultados nos resultados das pesquisas, mas deve, como é óbvio, integrar tudo numa só estratégia.

Por vezes existem equipas diferentes e autónomas nas estratégias WEB, uma equipa para SEO, outra para desenvolvimento, outra para anúncios, etc. Apesar de não ser “errado”, certifique-se que essas equipas comunicam entre si e que elevem ao máximo a otimização da experiência do utilizador, seja em valência for.

Quanto mais os utilizadores valorizarem o seu website/loja, mais facilmente o mesmo terá uma melhor classificação nos motores de pesquisa. Todo o trabalho envolvente será mais potencializado (Vendas, novos clientes, etc).

Foque-se na experiência do utilizador!

Fonte: SXO a evolução do SEO ou um complemento?

5 dicas úteis de SEO para iniciantes

Para os que estão a iniciar a aprendizagem de SEO, deixamos-vos hoje 5 dicas úteis para os “primeiros passos”.

1. Que keywords devo utilizar?

Inicialmente, as keywords utilizadas eram “simples” e na grande maioria constituídas apenas por uma palavra, como por exemplo “Assistência, computadores, portáteis”. Contudo, com o passar do tempo e devido aos milhões de websites existentes actualmente, as keywords atrás descritas deixaram de ter a mesma relevância.

Actualmente recomenda-se que utilize Long Tail Keywords, que na tradução literal para Português significa “palavras-chave de cauda longa”. O objectivo é que as keywords utilizadas sejam mais adaptadas ao seu website e objectivo. Um exemplo de uma Long Tail Keyword seria “Assitência de computadores no Porto”.

Outro aspecto a ter em consideração nas keywords é a utilização das mesmas no próprio texto. Contudo, a utilização deve ter uma densidade entre 3 a 5% do total do texto.

A Google disponibiliza uma ferramenta denominada KeywordPlanner para que consiga escolher keywords mais aproximadas do pretendido, onde pode fazer uma análise com a “concorrência” do seu website.

 

2. Anchor Text

A correcta utilização do Anchor Text é extremamente importante no SEO. O Anchor Text não é nada mais do que o texto que fica dentro de um link. Para quem tem alguns conhecimentos de HTML, o link é constituído pelo código: < a href=”http://www.linkdedestino.pt”>Ver< /a>.

O Anchor Text no caso exemplificado é a palavra “Ver”.

Os motores de pesquisa dão bastante importância ao Anchor Text, pois também “ajudam” a melhorar o page rank da página que receberá o utilizador oriundo do link.

Em 2012 a Google começou a penalizar os websites com backlinks “fracos”, sendo que na grande maioria os backlinks são “gerados” através do Anchor Text.

Exemplo:

Não deve utilizar o tão famoso “clique aqui” para download ou acessos a páginas através de links. Aliás, devido ao facto de as palavras “clique aqui” serem tão utilizadas para downlods de pdf’s (por exemplo), a título de curiosidade, se pesquisar no Google por “Clique aqui”, irá surgir em primeiro lugar a página da Adobe (Acrobat Reader).

Sugerimos a utilização de um Anchor Text mais específico, tal como:

Visualizar < a href=””>orçamento rectificativo 2015< /a>.

 

3. URL amigável

Os URLs do seu website devem ser o mais “amigáveis” possíveis, isto é, devem conter palavras/frases sugestivas sobre o conteúdo da página que estão a aceder através daquele URL.

Exemplos:

URL não amigável:
http://www.oseuwebsite.pt/artigo.php?id=1

URL amigável
http://www.oseuwebsite.pt/seo/como-optimizar-o-seu-website-para-seo

E como podem criar URLs amigáveis?

Caso utilizem o WordPress, basta activar a opção em “Ligações permanentes”. Para os outros casos, podem por exemplo utilizar o ficheiro htaccess para “gerar URLs amigáveis”. Neste caso, são necessários alguns conhecimentos de programação.

 

4. Imagens

Sempre que necessitarem de colocar uma imagem no website, aconselhámos que o nome da imagem seja o mais aproximado do nome do artigo ou do assunto a que está relacionada.

O uso de imagens com o nome “imagem01.jpg” a nível de SEO não é relevante, contudo, se o nome da imagem for “5-dicas-uteis-sobre-seo.jpg “, facilmente conseguem perceber que haverá uma melhor probabilidade de indexação dessa imagem e até da própria página ao motor de pesquisa.

Uma outra dica sobre as imagens, é utilizar sempre o atributo “alt” no código HTML da imagem. O atributo “alt” é bastante útil para os casos em que por algum motivo não é possível mostrar a imagem, logo o website substitui a imagem pelo texto que está no atributo alt.

Exemplo:
< img src=”5-dicas-uteis-sobre-seo.jpg” alt=”5 dicas úteis sobre SEO” title=”5 dicas úteis sobre SEO” />

 

5. Tempo de carregamento do website

Tal como nós, a Google “gosta” de websites “rápidos”, em que tanto o carregamento da homepage como das restantes páginas seja quase instantâneo.

Existem inúmeros factores que podem influenciar o carregamento de um website, sendo os principais a qualidade do alojamento em que o website se encontra alojado, da quantidade de imagens e dos ficheiros (CSS / JS) carregados.

E como podem saber o que está a causar lentidão no carregamento do website?

Uma das melhores ferramentas para efectuar essa análise é o GT Metrix.

Neste website, basta colocar a URL do website e ele indicará:

  • Tempo total de carregamento do website
  • Tamanho da página inserida no URL
  • Total de “pedidos” javascript, imagens, etc.
  • Outras Informações

Além destas informações, será apresentada uma lista de recomendações de melhorias.

Existe também um separador bastante interessante (Timeline), onde é possível visualizar o tempo de carregamento de cada pedido.

Estas são apenas 5 dicas (muito resumidas) de milhares de optimizações possíveis realizáveis através de SEO.

Fonte: 5 dicas úteis de SEO para iniciantes

Introduction to SEO

SEO (Search Engine Optimization) ou Optimização para Motores de pesquisa é um conjunto de estratégias e técnicas com o objectivo de potenciar e melhorar o posicionamento (organicamente) de um website nos resultados dos motores de pesquisa. Por organicamente queremos dizer que o mesmo é desenvolvido sem recurso aos anúncios pagos.

Quem desenvolve websites ou simplesmente tem um website próprio, sabe que o posicionamento do website nos resultados de um motor de pesquisa é algo fundamental para o sucesso do mesmo.

Para que isso seja possível existem várias técnicas e estratégias, sendo as duas principais o SEO (Search Engine Optimization) e SEA (Search Engine Advertising).

O objectivo deste e dos próximos artigos sobre SEO é “ensinar” estratégias e métodos para implementarem no vosso website ou simplesmente ficarem a saber como o SEO funciona.

A utilização de estratégias / técnicas SEO tem os seus prós e contras, dos quais destacamos:

Prós

  • Investimento reduzido
  • Credível
  • Escalável
  • Maior ROI (retorno de investimento) a longo prazo
  • Sustentável
  • Relevante

Contras

  • Mais difícil e trabalhoso.

Apesar de termos enumerado apenas um “contra”, este é sem dúvida o ponto fulcral do SEO.

A vantagem do SEO é o facto de não ter custos directos para o proprietário ou programador do website,por custos directos refiro-me à necessidade de compra de palavras chave / keywords (anúncios adwords).

SEO vs SEA***

*** O posicionamento do website nos resultados de uma pesquisa através do SEA “obriga” a ter sempre o anúncio activo e saldo positivo na conta adwords.

Contudo e ao contrário do SEA (anúncios adwords), carece de muito mais trabalho na fase inicial e acompanhamento posterior, pois é necessário:

    • Desenvolver e executar uma estratégia
    • Utilizar keywords certas
    • Criar conteúdo original de qualidade
    • Links Internos e externos funcionais e relevantes
    • Questões técnicas sobretudo a nível de programação

Tendo em consideração que se pretende ter o website no topo das pesquisas durante um longo periodo de tempo, o facto de a estratégia SEO não ter custos (adwords) é uma vantagem avassaladora.

No próximo artigo iremos abordar as “Keywords”, que é um dos maiores pilares numa estratégia SEO.

Nota: Algumas das informações presentes neste e nos próximos artigos sobre SEO são da autoria de Vasco Marques.

Fonte: SEO – Sabe o que é? – Parte 1 – Pplware