Intro to Creating a WordPress Plugin

What do the plugins allow users to do?

Plugins are scripts written in PHP that alter a website and allow additional functionality on the backend. Plugins extend further than functions that are built into a theme (functions.php). Functions stop working when you change a theme whereas you can use the same plugin with any theme.

 

Why might you want to use this tutorial?

I copy the code in this tutorial to test the plugin created but I can also use it as a “starter” and see what happens when different aspects of the code are changed. Since I’m very much still a novice at PHP and WordPress, I learn most when I dissect something that I know works in order to understand how it functions.

 

Here are a couple of  tutorials I found to create an easy WP Plugin:

http://wpninjas.com/how-to-create-a-simple-wordpress-plugin/

http://wpmu.org/how-to-create-your-very-first-wordpress-plugin/

 

Backgrounds

Chat Oct. 29 — Backgrounds

What are 5 rules-of-thumb or a-ha moments that you found in the first article? No real surprises in the article. The 5 things mentioned are known design do’s and don’ts

  1. The content should have purpose. As with any element of design, looking “cool” or “pretty” is not enough
  2. The background should fall in line with your brand. This is a given. This goes hand-in-hand with having a purpose. If it doesn’t align or make sense for the brand, don’t include it
  3. It should allow for placement of text that is easy to read. (This applies to color, contrast and size.) This is a given. Readability is key. If the background interferes with the text content, change it.
  4. The background theme should be fairly consistent throughout the site. (You don’t want visitors to think they have stumbled on to another page when clicking through.) This makes a lot of sense. It doesn’t have to be exactly the same but should have consistency.
  5. Backgrounds should download quickly and not cause the site to slow down or lag. I do know you should optimize files so that they load quickly but I never thought about downloading

 Why is the second article important?

The second article, “Creating Responsive Websites with Photo Backgrounds,” talks about the current trend in web design of using photographs as full backgrounds and goes into some techniques to make those image backgrounds responsive including a video background which is pretty nifty.

Why not just throw a large background image in the code and be done with it? Throwing a large background image in the code without adding the appropriate code/media queries will not make the image responsive. The success or failure, I believe websites today depend a lot of how that site adapts to different media. With so much of the population on smartphones, a site that is hard to navigate at the smallest screen stands to lose users. The fact is, people are navigating the web more from their phones more than they are in front of a computer screen.

 

Here’s a helpful link:

Backgrounds In Web Design: Examples And Best Practices

http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/

This article shows some best practices and goes into detail about backgrounds, in particular textures.

 

Best thing I learned during the chat was regarding some tools available to create textured backgrounds using CSS.

It shows you how powerful CSS can be if you know how to use. I found this article that I thought would be helpful. These are 10 resources for creating background patterns and textures.

http://speckyboy.com/2008/01/19/top-10-free-resources-for-background-patterns-and-textures-for-web-designers/

 

CSS Demos from CSS Tricks

  • What are four demos that you would like to use on an upcoming project?
    • Responsive Data Tables
    • Rounded Corners
    • Infinite Slide Show
    • Breadcrumbs with CSS Triangles
  • How would you use each?
    • Responsive Data Tables-perfect for spread sheet information like statistics or financial info
    • Rounded Corners-is a nice design element and make page look interesting
    • Infinite Slide Show- beats a static slide show and gives the page some animation. I’m a fan of slideshows so it would be interesting although I would want a feature to make it stop
    • Breadcrumbs with CSS Triangles-can make a nav bar look more interesting than the normal rectangle.
  • What benefits would your site gain from each? The use of any or all of these demos, would make my site appear more interesting by adding some animation and as non-typical design elements without being over-the-top

Here’s a helpful link for an “Infinite All-CSS Scrolling Slideshow”. It explains how to create it step-by-step
http://css-tricks.com/infinite-all-css-scrolling-slideshow/

 

CSS Demos from CSS Tricks

  • What are four demos that you would like to use on an upcoming project?
    • Responsive Data Tables
    • Rounded Corners
    • Infinite Slide Show
    • Breadcrumbs with CSS Triangles 
  • How would you use each?
    • Responsive Data Tables-perfect for spread sheet information like statistics or financial info
    • Rounded Corners-is a nice design element and make page look interesting
    • Infinite Slide Show- beats a static slide show and gives the page some animation. I’m a fan of slideshows so it would be interesting although I would want a feature to make it stop
    • Breadcrumbs with CSS Triangles-can make a nav bar look more interesting than the normal rectangle.
  • What benefits would your site gain from each? The use of any or all of these demos, would make my site appear more interesting by adding some animation and as non-typical design elements without being over-the-top

Some additional information on building a Infinite Scrolling slide show:

Infinite All-CSS Scrolling Slideshow http://css-tricks.com/infinite-all-css-scrolling-slideshow/

Wireframing

  1. What benefits can you gain by completing a wireframe? I don’t working on a project anymore before starting a site. It’s a roadmap
  2. What are the cool things about Wirefy? It allows you to see the structure of the page
  3. Do you think working coded wireframes are better for your workflow? Or sketches? Why? I do all three.
  4. What are some cool things from the assigned articles that you’d like to try using for your next project?

Here are a few articles and resources on wire framing that I found very interesting:

How to read a wireframe 
http://blog.fuzzymath.com/2011/07/12/how-to-read-a-wireframe/

The Important of Wiredframes in Web Design & 9 Tools to Create Wirerframes

http://www.onextrapixel.com/2009/07/15/the-importance-of-wireframes-in-web-design-and-9-tools-to-create-wireframes/

WordPress Security

What kinds of attacks are there? (malware)

Injections & Maldors// majority are automated

What mistakes are people making that make their sites vulnerable?

  • Cheap sites, bad passwords, 3rd party plugins

What are 3 things you WILL do now?

Backup, strengthen my password, make sure webhosting is secure.

What are 3 things you won’t do now, but maybe later?

Explain why.

I couldn’t find 3 things not to try.

 

When I read the chat article and read that you need to be careful with plugins, I wondered if there is anyway of running plugins through a filter to make sure they are ok to use. If I find any, I will be sure to update this post.

In the past, I’ve gotten a lot of spam comments but I ended up adding a WP plugin for added security and the spam emails stopped. There are some good security plugins available. It’s a matter of looking at the reviews, trying them out and seeing which one(s) work best for you.

 

Here are a few resources I found that were interesting and helpful.

Website security: 10 tips to protect your site from hackers

http://www.creativebloq.com/web-design/website-security-tips-protect-your-site-7122853

 

How to Make Your Website Hacker-Proof

http://www.entrepreneur.com/article/223967

Chat & Critique 9/24

  • Could we replace our site’s Forum with GroupMe? And if so, how would that work? It would be great if it could be embedded. I like being able to stay in one place and logging in one place instead multiple places
  • Could we make a request for critiques post on our own blog, enable comments, and then put the link to it into GroupMe so that critiques could be added in the comments of our post? I’d like to. I think it would be benefitial. 
  • Do we need additional GroupMe groups to handle different kinds of things? I think it might be beneficial to have different groups for different topics. Such as a GroupMe just for requests for critiques? Smaller groups can be more focused and specific.

GroupMe Chat and Trial Critique

  • Which method did you use and/or like best? Browser interface, App interface, or SMS Texting interface? I used my laptop browser
  • How do you think this method of chatting compares to others we’ve used in terms of benefits and disadvantages? GroupMe Chat worked really well. There were no lags.
  • Can you see us using this means of communication for things other than assigned chats? I guess. When do you think it would be useful? I like the idea of live reviews
  • Did you hit any snags while installing and learning to use it? No Any recommendations for folks thinking about using the App? Not really.

Codrops Collective

Article 1:

Great Responsive Web Design is a Matter of Process

This article talks about how responsive (flexible layouts) has changed the approach to traditional design.

  • Design for Content not for Devices.
  • Designers need to retrain their brains to stop focusing on widths and start focusing on fluid elements.
  • Adaptive Web = Adaptive Process

New workflow approach to RWD might look like this:

  • Develop a design system
  • The New Mockup  is based on  content hierarchy. Because a mobile device is narrow, it forces the content to be presented in a single column.
  • Designers give numerical values to elements of content that correlate to where those items might appear in a stacked column layout. This way, design is less constrained, but the content is always presented in the best way possible.

 

Article 2:

FlowType.JS

The most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS changes the font-size— as well as the line-height—based on a specific element’s width. This allows for a perfect character count per line at any screen width. The font-size thresholds will stop FlowType.JS from resizing the text beyond certain font-sizes. The user  has full control over the base font-size and line-height ratios, so that you can set the typography perfectly.

 

Article 3:

Comparing and contrasting ins,del, and s

Article goes delves deeper into <ins> and <del> and also compares and contrasts <del> and <s>

<ins> and <del> can be used to:

  • Record changes to an official document
  • Note changes to an article
  • Indicate the changes between two versions of a document

The <s> element is for indicating information that is no longer relevant or accurate, but still provides some value, and is generally used to create a document with both old and new

The best thing I learned from the chat is the Codrops Collective site. I found the site to be quite useful. There are a lot of tools available that can make developing sites more efficient.