Slideshow and Blog posts

At this point i was happy with my site Homepage it displayed all the content i wished it to in a nice format and was pleasing to the eye with it being dynamic.

 

Another element which i thought i managed to make the most of Expressionengine with was the Slideshow. Originally i had planned just to have this as a hardcoded slideshow that would act as images to social links. I realized after the sidebar that i was able to make a dynamic Slideshow that the images and links would be created using the channels feature. The Client now would be able to upload the image with a link in the publish content section and it would put it out the the Slideshow which has a limit of 10 on it for styling purposes. This was a feature that once again would be user friendly for a client which i had in mind for this project.

 

Now the Homepage was in order i moved onto the linking pages i couldnt create any of the Navigation pages as all of these would require paid for plug ins or the full version of EE. The home page is very dynamic so i felt this fulfilled the breif as it was however i wanted a few extra to test out links and get the hang of EE even more. I started with the Blog posting page. This was simple enough to do i first went back into HTML and CSS version i had and created it in there played around with style and decided on a Blog banner image with the title etc. keeping the same theme but using a header image for it. This meant going back and changing the channel fields to have an image section. This was one of the biggest problems i encountered i had to wait till i could speak to Shelley we had been taught a way of uploading images so the resized for other uses and i as i need the image to crop down for the homepage i was unsure how to do it i played around and got most of it right but didnt know how to put the image into place. Once i spoke to Shelley we was able to fix this issue however and the banner image was easy to add in.

 

Whilst putting the Blog page together i realised there was an issue however the Page wasnt picking up the stylesheet so all was unstlyed. I realised that i hadnt used the {Site_URL} prefix for the CSS Stylesheet  this was a simple fix which took me some time to figure out however due to not knowing how the file structure worked within a FTP.

 

The page soon took form however and i was pleased with the outcome.

 

…more to come

Advertisements

The Side bar (biggest achievement) (Please read :D)

The side bar is probably one of my favorite elements within the Website due to the level of dynamic content and Client based ease of use.

 

To pick up where i was… At this point i had a hardcoded in side bar in a template within embeds. The way i had coded the HTML meant that each “Widget” had a class called Widget which could be repeated for each one. I realised using embeds correctly i might be able to make a coustimizable sidebar with a simple drag and drop approach. I got this idea from enjin when if you want to move a sidebar element above another its a simple WYSIWYG drag and drop.

 

I took each widget and placed it into a new template within a template group called “Widgets”. I then went back to the sidebar and embed them instead this means if i was to hand this over to a client i could teach them which lines of code to drag and drop and if they wanted to move the clander up the sidebar it would be easy without any knowledge of HTML, CSS or EE. This to me was a very professional way of dealing with a content also making the most of the EE Embeds system allowing me to create a WYSIWYG element within a a great CMS. The importance of this meant that also if in the future the client wanted another widget it would be simple enough to create a new template insert code then just embed it into the sidebar.

 

After this had been moved around and i had this new layout i was able to start making the widgets dynamic as all content was the simple hard coded in content. The log in is still hard coded in but this was due to not being able to use this feature with the “Core” version i did however leave the hard coded version in as a place holder for something i might replace in the future. The recent threads i struggled with at first wondering how to achieve this but in the end it was a simple case to actually do just using the the EXp:Channel:entries then just using the Title. I started looking into the author and how you can add this feature in. I was happy to find not only can you add the author you can put in the Profile pic in aswell so using these variables i replaced the hardcoded versions with the EE ones which worked a treat but required some re styling so i spent some time editing this around however in the end i thought ill come back to style after. The posted Date and Time was easy enough with the EE tags.

 

The Calander was probably the hardest element to edit and get working i spent quite a bit of time trying to find a version online that would work how i wanted. I spent time with Shelley trying to solve this issue and although i got one that was telling the date the links wernt working and we had issues. In the end i was able to find in the EE documentation there “Mini Calander” which i put into place however it looked hideous (can be seen here http://ellislab.com/expressionengine/user-guide/modules/channel/calendar.html) they provided you with some CSS which i put in them changed the colour scheme around to suit my site. Now the the calendar works great and the links work showing posts within the month that’s shown and also on the date you pick.

 

The social Links didnt need to be dynamic but i followed Twitters guides and was able to personalize the message that it would put in for the user when opened which was very helpful and i will defiantly use in the future! The links at this point where still different sizes and created using gradients.

 

Now the side bar was dynamic and fitted in with the Site. I went back to the main content made the Blog’s have dynamic post times and dates plus used the author tag correctly. I made many posts at this point to test out the styling with different lengths titles etc for tests.

 

 

Putting It into Expressionengine

Well after buying the domain name for my own personal website i decided to use this as my hosting space for this website until marked then i will begin work on my own site. I know have hosting and a domain name and have put across the website into Expressionengine. There where a lot of troubles along the way mainly due to having a break from web design then coming back to it and had forgotten a lot of what we learnt in Lectures however the EE documentation is astounding and was able to refresh my memory and once i had caught up i was able to not only put it into expression engine but improve my design a lot!

Ill recap from the begging my experiences with putting the site into EE.

 

The first challange was uploading expression engine and installing it to the FTP i have never actually hosted a live site other than on the Uni servers so no real experience of how the files work etc. I was able however to upload and install without much issues due to the Video tutorials and general know how. This was an interesting experience and gave me more insight for when i have a Client of my own to publish a site for. I also went through some extra parts for security like chaning the “admin.php” file name to “solsa.php” which stands for Sons Of Locust Super Admin these where little extra touches for the purpose of security.

 

EE now installed and ready to role i started by putting all my HTML into the index (which i made me home page) on the “News” template group. I then sliced up to content into embeds as taught to us during lectures. I started with the HTML header, navigation normal header, side bar and footer. This broke a lot of the content up and meant  i wouldn’t have to keep repeating myself remember DRY (Don’t Repeat Yourself).

 

aside from a few minor hic ups mainly forgetting how to embed a template (found this out through EE documentation) was a silly mistake but weeks of not touching EE lead to me forgetting a few simple steps. Now i had a index page with embedded content.

 

Non of this yet was dynamic however and all images and content was hard coded into the page. The first thing i wanted to get working was the blog function the main content to the site. Using the EE documentation i was able to follow this through. I created a channel and channel fields for the blog then assigned them together created 2 status’s as i would need this for a feature post. This all came naturally and was fairly easy to implement. It wasnt long before i was able to go back into the template and replace the hard coded content with EE variables and the blog was working. The extra’s on the blog like catogories, post time and date plus author however where still not these where things i hadn’t learnt yet and thought i would come back to once my page was up and running smoothly.

 

There was some small designs error’s e.g. there was an element within each blog post that was an ID however i changed this to a class due to needing it more than once and it sorted my issues. I also tweaked the height on the banner as it wasnt quite fitting right.

 

I Then moved onto the sidebar….. TBC

 

 

HTML and CSS mock up

I have created an HTML and CSS mock up of the website as i previously said i would in blog posts. After more research into the Gaming websites i come across an intresting WP template with Gaming websites. The WP theme is good and uses the common colour within the gaming genre with tweaking and my own spin i think the general layout would suit the clan nicely and would also help me from a learning designer perspective. The website theme can be found here.. http://wordpress.org/extend/themes/gamepress.

 

From looking at it you can see a lot of similarities with colour and layout. The sidebar was the biggest problem with this theme no background to it and blends in with the background. I took my favorite elements mainly the blog format and layout including the little image that’s repeated at the bottom of each post that’s a little horizontal line. combined it with the need of the clan tried to improve the typography using a font that had more weights and was able to be flexible and light with the header.

The mock up also took inspiration from some resources i found online. The background image that is repeating is supposed to be carbon fiber and was in a package of 30+ web texures which where free to use online. I took colour samples from this and built the site around it.

I am impressed with my Mock up and i hope that i am able to take this over to expressionengine without too much trouble it taken a little time and effort for the HTML and CSS but overall i haven’t had too many issues plus i got posative feedback from the owned of SOL who i showed this too. The biggest thing the Client liked was the coustum made buttons for Twitter and Facebook i made these using background gradients and font awsome graphics. I have included at the bottom of the page images of the website textures plus web graphics i created.

 

Deciding CMS and Site

I suddenly realised that i could choose to use a CMS other than Expressionengine. From the brief i didn’t think that other CMS’s where an option but after a second look i could choose to use WP or any CMS as long as Dynamic content was used in an effective manner.

 

I will however use expressionengine simply because it seams to be professional practice Local companies such as Tinderhouse and Red Carrot both use them within project so as i am aspiring to work with the likes of these companies it makes sense to use the same software to become familiar with them. I also have had past experience with WP and didn’t find it particularly comfortable to use although i only used plug ins and templates.

 

The website i will be working on however i have decided will be the Sons Of Locust one due to its wide use of Dynamic content coupled with the backing of Shelley. I will start to create an HTML and CSS based version as i find this easier to convert into expressionengine also this is the way we did it with the Fish site within Lectures.

Research and idea development

Starting the research for my work was hard as i have still not fully decided on which project to follow the portfilio website or the Clan website. I started to look at other web designers and company’s website as well as Clan website.

http://www.xdowx.co.uk/forums/

This was a Clan Website for “Dogs of War” instantly you can tell this is a website built on a CMS with a template. The navigation is small and the content is small and more like just a forums. This servs the purpose for the client however as they simply want something easy to maintain and it inst to advertise the Clan its simply a means of communication. You can see however a lot of use of Dynamic content user profiles, forums, Birthday Announcements, Calander

 

http://unuclan.enjin.com/

 

Clan website for UNU first of all WOW overwhelming Blue in your face! There are lots of link colours and things punching out at you but again use of dynamic content social links, blog type post etc. Clan website seam to all use similar CMS’s this one is using Enjin which is a WYSIWYG CMS where you can simply drag and drop modules onto a page and it instantly updates. The CMS is limiting in terms of Design and functionality plus very expensive in the long term.

 

http://www.bridgetdesigns.co.uk

This is a website by a Free Lance Website developer. The website is very pleasing to the eye good use of Typography, Colours, spacial awareness and headers etc. All that one could hope for from a Web designer I especially like the use of hand drawn elements. The thing i worries about however was the lack of Dynamic content that is used within The site. There are elements of Dynamic content mainly the RSS feed at the bottom for Twitter, Blog and  testimonials  but for the most part it is static content such as prices, information and images.

 

http://redcarrot.co.uk/

Red Carrot are a company who’s website i have looked at a few times due to having them attend a lecture for our benefit and as such is the first place i go to when researching into other Company’s. The website has also had a re design. Going with the times it currently is a good showcase of the “Flat design” using a few solid colour and flat content. Colours that change on each page within the head offer a nice touch plus the well layed out content is also well placed. The only Dynamic content that i really see on each page however is the Blog posts that run across the bottom which are also in my opinion too big. Great site but again re affirming the idea that portfilio websites don’t use Dynamic content to the fullest.

 

The current research points towards the Sons Of Locust website being the best option however i would love the chance to work on my portfolio website and build it into a site that i can use for the future.

Dynamic Webdesign Breif

The Dynamic Web Design brief is probably one of the most important parts with the current Wed Design Industry so nailing a good way to deal with Dynamic Website will be an interesting Challenge. This is a small break down of the brief with initial thoughts on ways to proceed from this point forward.

 

“Dynamic web pages can change their content based on what the user does, like clicking on some text or an image. If information stored in a database changes, the web page connected to the database changes accordingly and automatically without human intervention. ”

“a content management system (i.e. ExpressionEngine or WordPress as a CMS),”

Option 1 – Client Edit/Update Option

“ExpressionEngine is one of the best professional content management systems ”

“a solid understanding of using ExpressionEngine features such as template system, channel entries, RSS, and blog-like behaviour.”

“There are no restrictions placed on the content of your website.”

“Demonstrate proficiency in the use of a range of production techniques and creative processes”

“Apply critical awareness of the relationship between form and content in dynamic web design”

“Demonstrate developed ability to engage critically with theory relevant to web design and connect theory with practice and evaluate their own and others’ professional work in an objective manner”

  • Generate ideas in response to set briefs and / or as self-initiated activity, critically evaluating the ideas for suitability.

 

These Quotes from the Brief give a great idea of what is expected as well as leaving open room for us as students to interpret and take our own spin on it. The main point is that all Web design features should revolve around the idea of “Dynamic” content. Blog behaviors are interesting and the way this will work will help set our understanding of Web Design immensely!

 

Initial Ideas

 

The first idea i have had to to continue with my last website that i did for Web design as this was my portfolio web site that was able to show the more creative aspect of what i can do. The web site was also a step up from my previous designs and started to show real signs of being a professional Web Designer which has been a major worry of mine. The main issue of using my website was the content I cant see how much of it would fit into the Dynamic aspect. The portfolio part would work well due to the ever updating pieces of work that can be added to the website. However most of the other content would be static and wouldn’t be helpful for this project.

 

The second idea is one that runs along with my Other assignment Self Iniciated Project in which i am doing a HTML and CSS Mock up for the Web site i “Could have” built for the Sons Of Locust (www.sonsoflocust.com). The Website would be Heavily Dynamic and be a great example piece. I dont know how this website will turn out and due to not knowing how to produce Dynamic content how my ideas will fit in what we shall be taught.

 

I will continue to think about the ideas and try to build upon them as my HTML and CSS mock up of the Sons of Locust comes along i will get a better idea of how it will fit with it.