Wednesday, April 11, 2012

HTML5 Breakdown Part I

Summary:

A review of a basic foundational review of HTML5, including how new and old tags combine functionality of SEO, documentation, and designing style to make a more fluid and responsive coding language for web pages.

Thursday, March 8, 2012

Getting Started with PHP: Strings

Strings


Strings are lines of text characters:
"AwesomeDoni loves books"
"It's raining outside today"
These are two examples of strings. In PHP, these are indicated by quotations after a command. It's useful because you can simultaneously declare a variable and its value while commanding PHP to perform a function, enclosing variables to be displayed as text as single quotes.


Getting Started with PHP: Basic Rules

PHP is a programming language. This means that it can evaluate data and output various responses based upon a set of instructions written by the programmer. Below are some basic rules to keep in mind when you work with PHP:


Getting Started with PHP: Understanding Variables

Variables


Programming languages work with the computer to retrieve data from the computer's RAM (Random Access Memory). As I explained in the first section, PHP pulls information from a database using user input. In order to do this successfully, PHP, like many programming langauges relies on the existence of variables.



Saturday, March 3, 2012

Getting Started with PHP: How PHP Disseminates Information

Chopping Down that Data Tree...

PHP is a programming language that collects data stored in a virtual database from users and outputs it in your browser. Web developers use PHP to create dynamic and responsive websites that are easier to maintain and capable of executing complex tasks.

Friday, March 2, 2012

Coding Tips: Proper Documentation 101

I've had the fortune of knowing a lot of professional and casual coders over the years--(well, "fortune" if you call banging your head against the table at dinner a delight, while computer scientists and engineers trade woeful stories about that unintelligible bit of code their group member turned in that week) and the one thing that never ceases to amaze me is how common the complaint of poorly documented code crops up.


Designers new to the world of web development have probably noticed by now that serious coders, like computer scientists or electrical and computer engineers detest having their work in C++ and Python compared to scripting and styling languages like HTML and CSS, but the truth is that there are a few common lessons that designers should learn from these more experienced coders that you won't get monkeying around with scripts and bits of code from common online source guides like W3Schools.  


That said, let's talk about properly documenting your code.

Learning to use Wordpress: 3 Free Customizable Wordpress Themes for HTML 5

Are you a web developer or designer who is new to Wordpress? 


You've probably heard of it as the easy to use web editing software or content management system (CMS) that can make your life as a casual developer or full-time designer or web manager easier.


This is generally true, but before I sing it's praises it would be important to point out, as with any strong coding based project, it's better to start learning on someone else's shoulders as opposed to building from scratch.


Below are  my picks for Wordpress themes for new developers who want to work with HTML5:



Friday, February 10, 2012

Wordpress Loops, Index.php explained further...



  • Multiple loops
  • Theme styling
  • Get posts

Header.php broken down for Wordpress...





    header.php broken down...Notice the important HTML and PHP commands here:
    • <div id="page-wrap"> starts in your header.php file but will end in yourfooter.php file.
    • <link rel="stylesheet..."> calls on your CSS stylesheet, javascript, and profile like a normal xhtml file would
    • <div id="banner"> or <div id="header"> styles a webpage as you normally would.
    • Unique Wordpress attributes include <body <?php body_class(); ?> >which allows Wordpress to identify and tag pages using an array attribute.


    Index.php, Broken down into a Visual Guide














    A visual layout of a Wordpress page. The code for this page may be in a file calledindex.php where the following code grabs content for the webpage:

    <? php get_header(); ?>
    <? php get_template_part(); ?>
    <? php get_sidebar(); ?>
    <? php get_footer(); ?>

    Getting Started with Wordpress


    For newer designers and users that want customization and dynamic websites Wordpress is the go-to resource for collaborative innovation.
    However, if you're anything like me the preceding sentence didn't make much sense to you.
    • Customization?
    • Dynamic?
    What does this have to do with anything? What does the Wordpress platform offer that building a simple site on your own using HTML and CSS doesn't?
    The answer is actually pretty simple: usability. With Wordpress, you can design a framework for a website and pass it onto a new user who can then upload their own content, tweak the details and customize it to suit their needs, all without having to dig into the different elements of coding and design.

    In this series on Wordpress we'll be looking at the different opportunities that become accessible to novice users and the refreshing elements available to experienced designers and how Wordpress manages to unite both of these interests using themes and the powerful scripting commands of PHP.

    Before we begin, you should be sure to familiarize yourself with Wordpress itself.
    There are two websites available where you can get all of the answers that you need straight from the horse's mouth:

    www.wordpress.org - The free resource where you can create an account, upload or download themes and create your own website.

    and

    www.wordpress.com - The official corporate website where you can also create an account and talk to wordpress developers who may answer your questions about building a website on wordpress, especially working with PHP.

    There are also numerous independent resources offered by coders and developers delving into Wordpress everyday, looking to make their own mark in design.
    Very shortly, I'll be posting some visual guides to getting started with Wordpress.

    Design Elements with Javascript


    JQuery is the go-to library for designers utilizing JavaScript in their web pages, but you should also be careful not to over-use it and frankly, should avoid use of it when you can because many web browsers now come with features that can block JavaScript, like Firefox and Google Chrome.
    For this reason, you should only use JavaScript in special cases and in a fashion where redundancy won't hurt the look or feel of your design. I used it to show brief overviews of a company's services, but also provided separate sections that were readable in browsers that accepted CSS/HTML standards.
    Here is a sample of the small accordion I made using JavaScript and the JQuery library:

    Accordion Menu Styled using JQuery.
    A simple accordion stylized using the Jquery library.

    Latest Designs (VINGRAM Enterprises, LTD)


    These are some screen captures from my latest project, a full web re-design for VINGRAM Enterprises LTD.
    Design Elements:
    • Careful Attention to Space
    • Readability
    • Clean, Modern Look
    • Conformity to Brand Standards
    Screen Cap of VINGRAM Enterprises LTD
    CSS3 and HTML, with a bit of class in between...

    Some Comments on Modern Scripting Languages...


    What types of things can you do with CSS? More than you can possibly imagine!
    Designers new to coding might assume that most elements in a webpage are created using graphic editing software, but the gurus over at 1st Web Designer or Onextrapixel will tell you that anything you can create in a design program like Fireworks or Illustrator, a great coder can recreate with the wonders of CSS3.
    The best part about this is, new scripting languages are making it easier and easier for novice coders to make clean, readable and attractive websites.
    For example, HTML5 simplifies commonly complicated design elements like tables using modifiers like <section> </section> and getting rid of unnecessary closing tags. CSS3 allows for greater customization of divs, the backbone of modern webpages.
    When I first started designing websites in High School, most of the fun clean looking elements that are common in websites today were made using graphic editors. Want corners on that table? Better create a background image with corners! Oh, and don’t forget to manually design the size and shape of each table, copying the code directly into the <table> and <td> tags.
    Now with CSS, you can simply create design standards for every table in your webpage, modifying one slice of code without combing through the entirety of your *.html file. HTML5 is now catching up with this shift in design and coding simplification.
    It will be interesting to see what designers create without having to rely on a separate code guy or gal in-between.
    -Doni