Sunday, March 29, 2015

Project: Webdeveloper Machine(PHP) : Post PHP 001 : Wordpress Multisite Bitnami Stack

Hello Readers,

Here with this post I am achieving a new milestone with configuring a PHP Web Developer Machine of mine.

What I did here is configured Wordpress in a fashion that I can start developing Wordpress Project immediately without conflicts or any admin act. You might wonder why I used bitnami stack the answer is that it is an independent stack thus reduced my overhead; additionally it is a bundle thus one setup and I all all things in place.
Alternative way is to manually configure individual components but obviously it would take more time.

My aim: Have a Wordpress Development Environment ready with required basic dependencies

Objectives:
  1. Creating Wordpress Development Environment ready to be used
  2. Resolving dependencies and keeping them non conflicting with further setup
  3. Reducing time required to start a new wordpress project

Process:
Here is what I did in Step by Step format:
Step 1: I downloaded the Wordpress Multisite Bitnami Stack from their official website (for Linux)
source: https://bitnami.com/stack/wordpress/installer
Step 2: I followed the steps to access this executable and created a VLog for same; here it is...
 
https://www.youtube.com/watch?v=OR4EIhOLht0

Observations: 
  1.  For Linux machine like ubuntu the stack installer needs to be executed with root credentials
  2.  By default the folder for this stack is under opt directory
  3.  The domain/ URL to access is to be set while setup in our case it is localhost
  4.  All the dependencies like Apache, MySql are independently accessible under the directory of 
     bundle.
Outcomes:
  1. Wordpress Development Environment ready to be used
  2. Dependencies resolved and non conflicting with further setup
  3. Minimal time required to start a new wordpress project


Project: Webdeveloper Machine(PHP) : Post PHP 000

Hello readers,
Here I am trying to express myself setting up my perfect Webdeveloper Machine(PHP); you might notice PHP in bracket I as wish to categorize all the machine activities only for using the PHP Language.

This is my Post 000, where I decided to go with Ubuntu 14.04.01 as my base OS and install it. For which I made a video recording on steps I followed for installation of Ubuntu below.


 
https://www.youtube.com/watch?v=LE3ncmph3U0

I would like to define of my project Webdeveloper Machine(PHP)'s desired outcome and applied objectives to it.

Objectives:
  1. Install and configure a Linux; Configure it for PHP
  2. Test run all frameworks and API's in topping the charts in my knowledge
  3. Building Knowledge Base for same
  4. Additionally create possible bundle for next setup which shall be quicker than present one
Outcomes:
  1. Machine at dispose in case of I need to keep resume to develop anything based on PHP language
  2. Minimal resume time to development with easy backup possibility and tremendous version control
  3. Support to adapting changes while coding with PHP language

Friday, March 27, 2015

Designing Web Pages without coding - The Kompozer tool

Hello readers,
I today present you a simple and easy way to design web pages without knowing HTML. For this we are using a WYSIWYG editor. (What You See Is What You Get)

Most you must have used such editor embedded inside your email provider like this:
WYSIWYG Editor- Gmail Composer

Or may have at least used any word processor; the concept is same. Here we are using the Kompozer Tool to design webpages without any knowledge of HTML or we can say without coding in HTML.

Introducing Mockups ( or as we say in general terms a sketch of desired output ):
To design a webpage  we may proceed with a rough idea or thought around our mind about positioning stuff and deciding contents that we wish to put in it. Let's go for an example here which is for putting up a Biodata in webpage; following is the output I desire.
Mockup- Biodata Page
Now understand that it is not necessary that our mockup is 100% resemblance of what we desire. It is a design on paper what we will like to see, so we can go rough on it and exclude or include any details as per one's desire.

Step by Step Web Page designing using Kompozer tool for above shown mockup:

Step 1: Open Kompozer create a new file and save it a biodata.html
Step 2: You need to make three clicks as shown in diagram below to get a desired layout (Representation as in Mockup)
Note: I have gone 5 x 3 becoz I see three columns to partition web page and 5 main rows of data. Your selection may vary as per your need.
Step 3: Drag the table columns as you need to be shown in a webpage. This is what I did...
Step 4: Adding Content
You can directly add content by typing data in positions needed.
Below diagram shows all the things you may need to add further details for above shown mockup, including alignment, color, Size, inserting another table is again repeating Step 2
Step 5: Save all changes and open file from file explorer or by using any Web Browser

We can further continue this post into details of Kompozer and using Kompozer as an IDE please mention the need in comments.

Thank you for time and resources to read this post.

Warm regards from author, Kaustubh Joshi.
Link to my profile: in.linkedin.com/pub/kaustubh-joshi/47/712/538/

Quick setup Phonegap Development Environment using Docker

INTRO NOTE : Pre-requisite is to have ubuntu 16.04 Following DIGITAL OCEAN tutorial for same...