Plant Page

Tradescantia Zebrina
- Description
- Care
- Origin
Tradescantia zebrina has attractive zebra-patterned leaves, the upper surface showing purple new growth and green older growth parallel to the central axis, as well as two broad silver-colored stripes on the outer edges, with the lower leaf surface presenting a deep uniform magenta. The leaves are bluish green and usually have two longitudinal stripes that are silvery on the surface and purple on the underside. The leaf sheaths are thin and translucent, 8 to 12 mm long and 5 to 8 mm wide, at the mouth they are long, otherwise glabrous or slightly hairy.

It is commonly available and used as a houseplant and groundcover, aggressively colonizing new areas when left undisturbed. Propagated by cuttings, this plant can be moved or manipulated easily as its runners cling lightly to the ground (if used as cover). It tends to become an invasive species if not properly maintained. The plant is not frost-resistant but can be kept indoors during the winter months in colder climates.

Tradescantia zebrina is native to Mexico, Central America and Colombia, but can also be found from Belize to El Salvador and Panama, as well as on the Caribbean islands. It is naturalized in parts of Asia, Africa, Australia, South America, and various oceanic islands.
Hedera Helix
- Description
- Care
- Origin
Hedera helix is an evergreen climbing plant, growing to 20–30 m (66–98 ft) high where suitable surfaces (trees, cliffs, walls) are available, and also growing as groundcover where no vertical surfaces occur. It climbs by means of aerial rootlets with matted pads which cling strongly to the substrate. The ability to climb on surfaces varies with the plants variety and other factors: Hedera helix prefers non-reflective, darker and rough surfaces with near-neutral pH. It generally thrives in a wide range of soil pH with 6.5 being ideal, prefers moist, shady locations and avoids exposure to direct sunlight, the latter promoting drying out in winter.

Ivy is widely cultivated as an ornamental plant. Within its native range, the species is greatly valued for attracting wildlife. The flowers are visited by over 70 species of nectar-feeding insects, and the berries eaten by at least 16 species of birds. The foliage provides dense evergreen shelter, and is also browsed by deer. In Europe, it is frequently planted to cover walls and the Bavarian government recommends growing it on buildings for its ability to cool the interior in summer, while providing insulation in winter, as well as protecting the covered building from soil moisture, temperature fluctuations and direct exposure to heavy weather. Further uses include weed suppression in plantings, beautifying unsightly facades and providing additional green by growing on tree trunks.

It ranges from Ireland northeast to southern Scandinavia, south to Portugal, and east to Ukraine and Iran and northern Turkey.

Contact the Page Author

Email Me At: jackelsjoseph@gmail.com

Check Out My Github At: https://github.com/JosephJackels

About This Page

Why I Made This Page

Design

I've been learning Web Development and slowing honing my technical skills. I'm feeling fairly confident in the more 'functional' areas of web development, but have noticed that one area I REALLY need more practice in is the design process. The areas I need to get more practice in are:

Creating a base web design - what the project will look like before coding begins
Styling and creating functionality that achieves this design
Writing clean, proper, reuseable code to this affect
Using 'Semantic' HTML instead of an endless jungle of nested div tags
Responsive Design

Technical Skills

Along with design, this page was also a way for me to practice my more technical skills. Creating a web page requires me to decide the various goals and requirements for the project, and the best ways to achieve them. Some examples of this process that I gained more experience in by working on this project are:

Project Scope and Structure
Should the page be a hard-coded html/css/javscript page? Should the content be served dynamically from a server?
Language Choices
After a structure and scope is decided there are choices of what languages, frameworks etc. best achieve that goal, and a balance between complexity, upkeep effort, and effort in writing

Real World Work Environment

This Project was also a way for me to work on skills that are applicable to a 'real world' environment. In this project I attempted to follow a strict design and creation process. I gave myself deadlines and spent a lot of time creating specific, time-based goals for different parts of the project. This gave a rigor and structure to the process, requiring me to analyze my skills and progress to create goals that were both attainable and worthwhile for the end-design that I had in mind. This naturally led me to creating a strong 'Minimum Viable Product' where I met my base requirements and was forced to 'trim the fat' in areas that costed too much time for the value they would add.

How I Made This Page

Initial Design

I began the design process by coming up with a general list of what the page was for:

Display the Various Plants in My Home
Inform the user of various information regarding each plant

I then began crafting mockups using a program called Pencil. The initial mockups were just structure/organization based. To create a general structure that displayed all the information I wanted to share. I created one version for a landscape/desktop version of how the page should look and one version for a portrait/mobile version. I then added color and a placeholder image to the mockup, and began creating a background for each size-version of the site. The background images were created using images found online (all sources can be found in the footer of this page) and edited using GIMP - the GNU Image Manipulation Program.

Technical Process

After I had a design to work from, it became time to start the process of creating the actual website. I knew that I wanted to create a site that I could easily add new content to. I wanted to continue to gain experience with the skills and languages I had used thus far, while still learning new and better things and making improvements to my usage of them. This led me to three possible ways of creating this project, with pros and cons for each:

Option	Pros	Cons
Hardcoded in html/css/js	All skills I am fairly competent in Can easily be displayed, shared, and viewed on github pages for free	Updating content and properly organizing main file will be more work Main file will quickly become very large and cumbersome as content is added Less power and control over functionality
Base Files in html/css/js, server used to allow requests for a JSON file	Gets around CORS to load 'local' files from server Allows for content to be loaded from file Some slick javascript would allow for a dynamic page to be built easily, without much added to original 'easy' version of page Adding more content to page would be as simple as adding another entry to the JSON file Still uses simple stack with little extra knowledge required	No longer a static page, not able to be served on github pages Requires a server Server only neccessary for one task - overkill? Adding new content is easier, but still a little more complicated than it could be
Building a full CRUD App - html/css/js + mySQL, PHP	Most 'real world' version of the site Once built, easiest/best option for adding, removing, updating content Excellent showcase of skills Dynamic content/page creation	Highest work/time/effort to create initial product Higher complexity - requires much more error checking, form handling, input validation etc. Requires extra design/planning - creating database schema, handling user authentication for database writing access etc.

Ultimately I decided to create my MVP using the first option of a simple html/css/javascript page, while writing it in such a way that I would eventually be able to easily update it to it's final version of a CRUD app. This would allow me to quickly prototype and create the design/setup of the page, making any neccessary changes or updates before the final version is created and intertwined with the database. It was my hope that this would help to seperate the design process and the implementation process, ultimately improving and expiditing both sides of development.

With this course chosen, my steps for creating the project were:

Use the mockup design to implement the initial structure and style of the page
Add in content/placeholder content as needed. In this case the page only supported two hardcoded plants to switch between
Create a 'mobile first' page by initially styling everything as needed for the mobile version
Thouroughly test the mobile version layout
Add media queries to style page appropriately for the desktop version
Thoroughly test the desktop version layout
Analyze results and come up with any more steps to realize before embarking on 'full' (CRUD) version of page

What's Next?

Continuing With This Project

This project is not yet complete. At the time of writing the initial version of the page is just being wrapped up. Progress on the CRUD version will commence shortly, with more notes and review to come! Lots of content will need to be created and gathered, with the end goal of a page that can dynamically display all the different plants in my home, and a streamlined set of tools to create, read, update, and delete information.

Future Projects

The main education goals of this project were to allow me to improve upon my design skills, my development process, and to gain general experience. The knowledge, skills, and tools that I learn and create through this project will improve the quality of my future projects, my ability to manage development time, and my overall web design and development process. Be sure to check out my future projects on my Github, and check back again for the updated version of this page!

Tradescantia Zebrina

Hedera Helix