SlideShare a Scribd company logo
Story Section Description Solution Questions
A user can see a visual representation of
recent projects on the homepage.
Homepage A user visiting the homepage can see a dynamic
grid of images representing recent featured 4Site
projects. Interspersed among the images is a brief
block of introductory/branding message text. When
the user hovers over an image, a tooltip with the
project title will display. When the user clicks on an
image, it will increase in size, and a description of
the project and a "learn more" link will be overlaid
on top of the image.
Build a view to create a nested series of
DIVs containing the images and related
metadata. Use the Masonry or Isotope
JS libraries to control layout.
A user can see a visual representation of
the services 4Site offers on the
homepage.
Homepage A user visiting the homepage can see images or
icons representing the services 4Site offers. One
image will be larger than the others, representing a
"featured" service. When the user hovers over an
image, the image will animate to illustrate some
aspect of that service. When the user clicks on the
image, they will be taken to a page offering more
information about that service.
Build content type for Services, with two
fields to contain the small and large
images (each image will be a sprite
containing both the static and animated
versions of the image). Create a view to
display the images, each linked to that
service's page.
A user can see a video with more
informaton about 4Site Studios.
Homepage A user visiting the image can see a static image
from 4Site's brand video, with a "play" icon
overlaid. When the user clicks the image, the
image will turn into an embedded video player and
play the brand video.
Use Vimeo embedded player.
A user can see a paged listing of recent
blog posts and other resources on the
homepage.
Homepage A user visiting the homepage can see summaries
of the three most recently posted blog posts or
resources. A pager will allow the user to navigate
to earlier items. Each summary will contain the title
of the resource a summary of the body, the post
date, the type of resource, a thumbnail image from
the post, and a thumbnail image of the post's
author.
Build a view to display a paged
summary of the most recently published
nodes in the blog post and resource
content types.
A user can see 4Site's most recent Tweet
on the homepage.
Homepage A user visiting the homepage can see the most
recent tweet from the @4SiteStudios account. At
the bottom of the tweet are "web intent" icons
allowing the user to reply, retweet or favoritethe
tweet. To the left of the tweet, a large Twitter icon
will link to the main @4SiteStudios Twitter page.
Use Twitter module.
A user can sign up for 4Site's email
newsletter.
Footer A user can see in the site footer a newsletter
signup form. The form should contain a text box for
the user's email address and a submit button.
Upon submitting the form, the entered email
address should be added to 4Site's Mailchimp list.
Embed Mailchimp form in a static block.
A user can navigate to 4Site's various
social media presences.
Footer A user can see in the site footer a series of icons
representing various social media networks. Upon
clicking an icon, the user should be taken to
4Site's presence on that network.
Embed social media icons and links in a
static block.
A user can search for content on the site. Footer A user can see in the site footer a magnifiying
glass or other "search" icon. Upon hovering over
or clicking the icon, a seach form and submit
button will appear. Upon submitting the form, the
user will see a search results page, with the query
being the data that was entered into the form.
Configure Drupal core search.
A user can navigate to other pages on the
site.
Footer A user can see in the site footer a menu containing
links to the top-level pages on the site, and follow
those links.
Core functionality.
User Stories
1
A user can see a "Hire Us For Your
Project" button on any page, that moves
down the homepage as the user scrolls.
Header A user can see a button labeled "Hire Us For Your
Project," that moves down the page as the user
scrolls. When the button is clicked, the user will be
taken to a "Hire Us" webform.
Set CSS for button to fixed positioning.
(Depending on where the button is in
the layout, we may need to add jQuery
to switch between fixed and absolute
positioning once the user scrolls
beyond a certain point.)
A user can send an email to 4Site. Header A user can click an eimail icon in the site header
and see a pop-up "contact us" form, containing
fields for name, email address, subject, body text,
and a CAPTCHA. When the user submits the form
(assuming it passes CAPTCHA), the contents of
the form will be emailed to [TBD]@4sitestudios.
com.
Write a small custom module to create
and process contact-us/hire-us form,
which will appear differently (different
fields displayed, etc.) depending on
context.
A user can navigate to other pages on the
site.
Header A user can see in the site header a menu
containing links to the top-level pages on the site,
and follow those links.
Core functionality.
A user can contact 4Site about a project. Services A user can see (at the bottom of the Services page
or by clicking a "hire us" link) a form containing text
fields for name, organization, email address, body
text, a dropdown for project budget, date fields for
desired start and end dates, and a submit button.
Upon successful form submission, the contents of
the form will be emailed to [TBD]@4sitestudios.
com.
Use custom module created for "contact
us" form.
No visible CAPTCHA in the wireframe -
how do we protect against unauthorized
form submissions? Mollom?
A user can see the navigation menu
persist as they scroll down any page on
the site. Misc
A user scrolling down any page on the site can
continue to see the page navigation as they scroll.
Add jQuery to switch menu div between
fixed and absolute positioning
depending on scroll position.
A user visiting the Our Work page can
see a display of client logos, or click a link
and see a text list of clients instead. Projects
A user visiting the Our Work page can see a
display of selected client logos. The logos
dynamically position themselves in order to
minimize vertical gaps. The user can click a link to
see a text list of all logos.
Create a views display to display logo
field of the client content type (for nodes
with "promote to front page" checked)
within a masonry grid, and a second
views display to create a text list of all
clients.
A user visiting the Our Work page can
see a gallery of project images.
Projects
A user visiting the Our Work page can see a
gallery of project images. The user can toggle
between all projects and only those with case
studies, or filter the gallery by project type or
cause. Upon being filtered, the images in the
gallery will dynamically reposition themselves so
as to minimize vertical gaps. The user can display
more projects by scrolling down. When the user
hovers over an image, an overlay will appear over
the image, displaying the title of the project, the
client name, and a brief description of the project.
When the user clicks on the image/overlay, a page
will display with more information about the
project.
Create a view to display project images
within divs, with project title, client
name, description and more link
rendered in a div that is hidden until
revealed upon mouseover. Add
exposed filters for projects with case
studies, project type, and cause. Add
Masonry JS w/ infinite scroll to control
layout.
If some of the images are really
thumbnails for videos, how does the
user play the video? The onClick
behavior will display the overlay.
A user can see a project detail page.
Projects
A user clicking a "more" link on the Our Work page
can see a page with details about the selected
project. The page will include a gallery of images
from the project, the title of the project, the client
logo, a brief client testimonial, and three blocks of
text, each with a thumbnail image: The Challenge,
Our Solution, and The Results.
Theme project node page using Control
Display, template files, alter hooks, or
preprocess functions, depending on
requirements of graphic design.
User Stories
2
A user can see a Products page and
learn more about Hub and Dub.
Products
A user visiting the Products page can see a tabbed
listing of products (currently Hub and Dub).
Clicking a product in the tab will cause the page
below to shift to display the content for the
selected product. Below the menu tabs is
displayed an image and description for the
selected product, followed by a list of features. For
each feature, the feature name, a brief description,
and an icon or image are displayed.
Create a view to display all nodes of the
product/service content type that have
"product" selected, with only the
product selected in the menu tabs
displayed.
A user visiting the Products page can sign
up to learn more about Hub.
Products A user visiting the Products page can see a form
containing fields for name, organization, email
address, and phone number, and a submit button.
Upon successfully submitting the form, the
contents of the form will be emailed to [TBA]
@4sitestudios.com.
Use custom module created for "contact
us" form. Display through a static block
attached to the bottom of the content
area.
Should we put this into a database as
well? Can we automatically put this into
Salesforce?
A user can see a "What we Do" page and
learn more about the services 4Site
provides.
Services A user visiting the "What We Do" page can see a
series of service icons. Clicking an icon will cause
the page below to shift to show content for the
selected service. Below the icons is displayed an
image and description for the selected service,
followed by a list of capabilities. For each
capability, the capability name, a brief description,
and an icon or image are displayed.
Create a view to display all nodes of the
product/service content type that have
"service" selected, with only the service
selected in the menu tabs displayed.
A user can see a "Who We Are" page
with information about the company and
its employees.
Who We Are A user visiting the Who We Are page can see
introductory text, an embedded brand video, an
animaged GIF of the 4Site logo, text about 4Site, a
graphical display of 4Site employees with an
image and links to their social media profiles, a
graphic describing our process, and text and
graphics describing our community contributions.
Create basic page with introtuctory text,
brand video, logo GIF, and body text in
body. Create View to display staff listing
and attach block below main content.
Create static blocks to display Process
and Giving Back content and attach
below staff listing block.
A user can see an "Our Insights" page
with summaries of recently posted
insights (blog entries, white papers, case
studies, and training videos).
Insights
A user visiting the Our Insights page can see a
large image preview text and author thumbnail of a
featured insight, followed by an "infinite scroll"
display of previews of all insights. Each preview
includes an image, title, summary, post date,
insight type, and author thumbnail. The display is
filterable by insight type and topic.
Create a view to display all nodes of the
blog entry and resource content types,
in reverse chronological order, with
exposed filters for resource type and
topic. Create a second views display,
attached to the header of the first view,
to show the single most recently posted
blog entry/resource with "promote to
front page" set.
A user can read an insight, post a
comment, or share it to social media. Insights
A user visiting an insight page can see a large
image related to the post, the post title, post date,
insight type, author thumbnail, summary, post text
with embedded images, social media icons, and
an embedded Disqus comment block.
Create custom page templates for each
content type. Create custom theme
function to display social share icons.
User Stories
3
Content Type and Fields Field Type Widget Required
Basic page
Title Node module element
Body Long text and summary Text area with summary
Attachment File File
Blog Entry
Title Node module element
Media Fieldset
> Image Image Media file selector
> Video File Media file selector
> Caption Long text Textarea
Body w/ Summary Long text and summary Text area with summary
Attachment File File
Additional Information (Link) Link Link
Related Content Entity Reference Autocomplete
Topic Term Reference Select list
Service Term Reference Select list
Project
Project Name Node module element
Short Description Long text Textarea
Client Testimonial Long text Textarea
Challenge Long text Textarea
Challenge Thumbnail Image Media file selector
Our Solution Long text Textarea
Solution Thumbnail Image Media file selector
The Results Long text Textarea
Results Thumbnail Image Media file selector
Topic Term Reference Select list
Service Term Reference Select list
Client Term Reference Autocomplete
Cause Term Reference Select list
Client
Client Name Node module element
Client Logo Image Media file selector
Cause Term Reference Select list
Service/Product
Service Name Node module element
Product/Service? List (text) Select list
Product/Service Icon/Image Image Media file selector
Content Types
4
Description Long text Textarea
Features/Capabilities Field Group (field_group_multiple?)
> Feature/Capability Title Text Text field
> Feature/Capability Description Long text Textarea
> Feature/Capability Image Image Media file selector
Resource
Title Node module element
Body Long text and summary Text area with summary
Attachment File File
Media Fieldset
> Image Image Media file selector
> Video File Media file selector
> Caption Long text Textarea
Resource Type Term Reference Select list
Topic Term Reference Select list
Service Term Reference Select list
Client Term Reference Autocomplete
Cause Term Reference Select list
Require Registration Before
Viewing? Boolean Checkbox
Bio
Name Node module element
Title Text Text field
Bio Long text Textarea
Fun Fact Long text Textarea
Photo Image Media file selector
Twitter Link Link
LinkedIn Link Link
Service Term Reference Select list
Webform
Title
Body
Content Types
5
Vocabulary Name Description Example Terms Additional Fields Notes
Topic Shared fixed vocabulary across all blog posts,
resources, and services.
NTEN Conference, DrupalCon 2013, Content As Media Webinar
Series
Services Relates a piece of content to a specific department
or service that was delivered. Services will have a
two-level hierarchy, with top level terms
representing our divisions (Strategy, Video,
Design, Development, Support), and second level
terms representing the services offered within
each division.
Design
- Branding/Logos
- Website Design
- Mobile App Design
- Infographics/Visual Content
- Print Collateral
Development
- Website Development
- Mobile Development
- Video Applications
- CRM Integration
Strategy
- Content Strategy
- User Experience
- Management and Optimization
- Analytics and Reporting
Support
Video
- Commercials
- Edutainment
- Animation
- Event Videography
- Grassroots Video
Image: Small Image (sprite with both static and
animated version)
Image: Large Image (sprite with both static and
animated version)
Client Tagging vocabulary for clients. NetCentric Campaigns
National Building Museum
Say Yes to Education
Image: Client logo
Cause Description of the type or cause we were working
for.
Advocacy
Science and Technology
Resource Type Describes the type of resource White Paper
Case Study
Tutorial Video
Blog Post
Taxonomy
6
Module Name Used For Version Requirements/Dependencies Download Notes
Masonry
Homepage,
Projects
Views Infinite
Scroll Projects, Insights
Twitter 7.x-5.8 OAuth
OAuth 7.x-3.1
Library Name Used For Version Requirements/Dependencies Download Notes
Masonry or
Isotope
Homepage,
Projects http://masonry.desandro.com/jquery.masonry.min.js
Custom Module
Name
Used For Requirements/Dependencies Download Notes
4site_contact
contact-us form,
hire-us form
Modules to
Remove
Download Notes
Activity Stream
Advanced Help
Flexslider
Flippy
Fullcalendar
Geocoder
Geofield
Geophp
Mollom
Nice Menus
Nodequeue
Print
Profile2
ReCAPTCHA
Soundcloud Filter
Splashify
Modules
7

More Related Content

What's hot

Lewis Simpson portfolio
Lewis Simpson portfolioLewis Simpson portfolio
Lewis Simpson portfolio
Lewis Simpson
 
Online assignment online editing in wikis and digital magazine
Online assignment online editing in wikis and digital magazineOnline assignment online editing in wikis and digital magazine
Online assignment online editing in wikis and digital magazine
anoop kp
 
Using blogger 1415
Using blogger  1415Using blogger  1415
Using blogger 1415
Sam Norton-Taylor
 
Wikis
WikisWikis
Wikis
TallyFox
 
Facebook to Makeover Brand Pages
Facebook to Makeover Brand PagesFacebook to Makeover Brand Pages
Facebook to Makeover Brand Pages
Leo Burnett
 
My strategy for optimizing the site
My strategy for optimizing the siteMy strategy for optimizing the site
My strategy for optimizing the site
Prince Bertrand
 
How to use wordpress
How to use wordpressHow to use wordpress
How to use wordpress
Kyle Roberts
 
Intro wordpress (1) copy with dipesh sharma
Intro wordpress (1)   copy with dipesh sharmaIntro wordpress (1)   copy with dipesh sharma
Intro wordpress (1) copy with dipesh sharma
degana2009
 
Office 365 Productivity Tips "November Tussle"
Office 365 Productivity Tips "November Tussle"Office 365 Productivity Tips "November Tussle"
Office 365 Productivity Tips "November Tussle"
Christian Buckley
 
CC_Social_Media_Kit_9-11-15
CC_Social_Media_Kit_9-11-15CC_Social_Media_Kit_9-11-15
CC_Social_Media_Kit_9-11-15
Erin Zaranec
 
360i POV: Facebook’s fMC 2012 Announcements
360i POV: Facebook’s fMC 2012 Announcements360i POV: Facebook’s fMC 2012 Announcements
360i POV: Facebook’s fMC 2012 Announcements
360i
 
Facebook app tool
Facebook app toolFacebook app tool
Facebook app tool
cschwensen
 
Modern SharePoint Content Management Training
Modern SharePoint Content Management TrainingModern SharePoint Content Management Training
Modern SharePoint Content Management Training
IT Industry
 
Unit 2.10 - Frames
Unit 2.10 - FramesUnit 2.10 - Frames
Unit 2.10 - Frames
Intan Jameel
 
Share point 2010 portal setup
Share point 2010 portal setupShare point 2010 portal setup
Share point 2010 portal setup
Vinod Dangudubiyyapu
 
Moss2007 Enterprise Features Administration
Moss2007 Enterprise Features AdministrationMoss2007 Enterprise Features Administration
Moss2007 Enterprise Features Administration
LiquidHub
 
Google Co-Op Overview
Google Co-Op OverviewGoogle Co-Op Overview
Google Co-Op Overview
justlinkitnow
 
Office Share Point Server2007 Functionaland Architectural Overview
Office Share Point Server2007 Functionaland Architectural OverviewOffice Share Point Server2007 Functionaland Architectural Overview
Office Share Point Server2007 Functionaland Architectural Overview
LiquidHub
 

What's hot (18)

Lewis Simpson portfolio
Lewis Simpson portfolioLewis Simpson portfolio
Lewis Simpson portfolio
 
Online assignment online editing in wikis and digital magazine
Online assignment online editing in wikis and digital magazineOnline assignment online editing in wikis and digital magazine
Online assignment online editing in wikis and digital magazine
 
Using blogger 1415
Using blogger  1415Using blogger  1415
Using blogger 1415
 
Wikis
WikisWikis
Wikis
 
Facebook to Makeover Brand Pages
Facebook to Makeover Brand PagesFacebook to Makeover Brand Pages
Facebook to Makeover Brand Pages
 
My strategy for optimizing the site
My strategy for optimizing the siteMy strategy for optimizing the site
My strategy for optimizing the site
 
How to use wordpress
How to use wordpressHow to use wordpress
How to use wordpress
 
Intro wordpress (1) copy with dipesh sharma
Intro wordpress (1)   copy with dipesh sharmaIntro wordpress (1)   copy with dipesh sharma
Intro wordpress (1) copy with dipesh sharma
 
Office 365 Productivity Tips "November Tussle"
Office 365 Productivity Tips "November Tussle"Office 365 Productivity Tips "November Tussle"
Office 365 Productivity Tips "November Tussle"
 
CC_Social_Media_Kit_9-11-15
CC_Social_Media_Kit_9-11-15CC_Social_Media_Kit_9-11-15
CC_Social_Media_Kit_9-11-15
 
360i POV: Facebook’s fMC 2012 Announcements
360i POV: Facebook’s fMC 2012 Announcements360i POV: Facebook’s fMC 2012 Announcements
360i POV: Facebook’s fMC 2012 Announcements
 
Facebook app tool
Facebook app toolFacebook app tool
Facebook app tool
 
Modern SharePoint Content Management Training
Modern SharePoint Content Management TrainingModern SharePoint Content Management Training
Modern SharePoint Content Management Training
 
Unit 2.10 - Frames
Unit 2.10 - FramesUnit 2.10 - Frames
Unit 2.10 - Frames
 
Share point 2010 portal setup
Share point 2010 portal setupShare point 2010 portal setup
Share point 2010 portal setup
 
Moss2007 Enterprise Features Administration
Moss2007 Enterprise Features AdministrationMoss2007 Enterprise Features Administration
Moss2007 Enterprise Features Administration
 
Google Co-Op Overview
Google Co-Op OverviewGoogle Co-Op Overview
Google Co-Op Overview
 
Office Share Point Server2007 Functionaland Architectural Overview
Office Share Point Server2007 Functionaland Architectural OverviewOffice Share Point Server2007 Functionaland Architectural Overview
Office Share Point Server2007 Functionaland Architectural Overview
 

Similar to Technology Plan for new 4SiteStudios.com

Wikispaces Help
Wikispaces HelpWikispaces Help
Wikispaces Help
hapy
 
Shareist tutorial for Beginners
Shareist tutorial for BeginnersShareist tutorial for Beginners
Shareist tutorial for Beginners
Ma. Jocerie (Ching) Aragon-Martinez
 
Designing Your Facebook Page
Designing Your Facebook Page Designing Your Facebook Page
Designing Your Facebook Page
Department of Defense
 
Magento responsive flower theme
Magento responsive flower themeMagento responsive flower theme
Magento responsive flower theme
NETBASE CMSMART
 
Magento responsive flower theme
Magento responsive flower themeMagento responsive flower theme
Magento responsive flower theme
NETBASE CMSMART
 
A2WPress Roadfighter Theme Documentation
A2WPress Roadfighter Theme DocumentationA2WPress Roadfighter Theme Documentation
A2WPress Roadfighter Theme Documentation
A2WPress
 
How to use projeqt--my final presentation
How to use projeqt--my final presentationHow to use projeqt--my final presentation
How to use projeqt--my final presentation
alliek5
 
.How to Use Projeqt--my final
.How to Use Projeqt--my final .How to Use Projeqt--my final
.How to Use Projeqt--my final
alliek5
 
Web page manual
Web page manualWeb page manual
Web page manual
kyffa
 
Group 3
Group 3Group 3
Group 3
karl cometa
 
Plan B Meshwork User Guide V1
Plan B  Meshwork  User  Guide V1Plan B  Meshwork  User  Guide V1
Plan B Meshwork User Guide V1
Gaiasoft
 
Facebook for Social Media Marketers
Facebook for Social Media MarketersFacebook for Social Media Marketers
Facebook for Social Media Marketers
Miqdaad Dohadwala
 
Media Evaluation Question 4 - Technology 1
Media Evaluation Question 4 - Technology 1Media Evaluation Question 4 - Technology 1
Media Evaluation Question 4 - Technology 1
smarshall96
 
Caux meshwork user guide v1.0
Caux meshwork user guide v1.0Caux meshwork user guide v1.0
Caux meshwork user guide v1.0
Gaiasoft
 
A2WPress Localbusiness Theme Documentation
A2WPress Localbusiness Theme DocumentationA2WPress Localbusiness Theme Documentation
A2WPress Localbusiness Theme Documentation
A2WPress
 
Telt Training: Wiki Fundamentals
Telt Training: Wiki FundamentalsTelt Training: Wiki Fundamentals
Telt Training: Wiki Fundamentals
Mike Bogle
 
Kenya Business Accelerator Meshwork User Guide v1.0
Kenya Business Accelerator Meshwork User Guide v1.0Kenya Business Accelerator Meshwork User Guide v1.0
Kenya Business Accelerator Meshwork User Guide v1.0
Gaiasoft
 
WCIT Meshwork User Guide v1.0
WCIT Meshwork User Guide v1.0WCIT Meshwork User Guide v1.0
WCIT Meshwork User Guide v1.0
Gaiasoft
 
Dreamweaver cs6 step by step
Dreamweaver cs6 step by stepDreamweaver cs6 step by step
Dreamweaver cs6 step by step
zoran Jelinek
 
Image Handling: Understanding the Basics of WordPress Media
Image Handling: Understanding the Basics of WordPress MediaImage Handling: Understanding the Basics of WordPress Media
Image Handling: Understanding the Basics of WordPress Media
Rich Plakas
 

Similar to Technology Plan for new 4SiteStudios.com (20)

Wikispaces Help
Wikispaces HelpWikispaces Help
Wikispaces Help
 
Shareist tutorial for Beginners
Shareist tutorial for BeginnersShareist tutorial for Beginners
Shareist tutorial for Beginners
 
Designing Your Facebook Page
Designing Your Facebook Page Designing Your Facebook Page
Designing Your Facebook Page
 
Magento responsive flower theme
Magento responsive flower themeMagento responsive flower theme
Magento responsive flower theme
 
Magento responsive flower theme
Magento responsive flower themeMagento responsive flower theme
Magento responsive flower theme
 
A2WPress Roadfighter Theme Documentation
A2WPress Roadfighter Theme DocumentationA2WPress Roadfighter Theme Documentation
A2WPress Roadfighter Theme Documentation
 
How to use projeqt--my final presentation
How to use projeqt--my final presentationHow to use projeqt--my final presentation
How to use projeqt--my final presentation
 
.How to Use Projeqt--my final
.How to Use Projeqt--my final .How to Use Projeqt--my final
.How to Use Projeqt--my final
 
Web page manual
Web page manualWeb page manual
Web page manual
 
Group 3
Group 3Group 3
Group 3
 
Plan B Meshwork User Guide V1
Plan B  Meshwork  User  Guide V1Plan B  Meshwork  User  Guide V1
Plan B Meshwork User Guide V1
 
Facebook for Social Media Marketers
Facebook for Social Media MarketersFacebook for Social Media Marketers
Facebook for Social Media Marketers
 
Media Evaluation Question 4 - Technology 1
Media Evaluation Question 4 - Technology 1Media Evaluation Question 4 - Technology 1
Media Evaluation Question 4 - Technology 1
 
Caux meshwork user guide v1.0
Caux meshwork user guide v1.0Caux meshwork user guide v1.0
Caux meshwork user guide v1.0
 
A2WPress Localbusiness Theme Documentation
A2WPress Localbusiness Theme DocumentationA2WPress Localbusiness Theme Documentation
A2WPress Localbusiness Theme Documentation
 
Telt Training: Wiki Fundamentals
Telt Training: Wiki FundamentalsTelt Training: Wiki Fundamentals
Telt Training: Wiki Fundamentals
 
Kenya Business Accelerator Meshwork User Guide v1.0
Kenya Business Accelerator Meshwork User Guide v1.0Kenya Business Accelerator Meshwork User Guide v1.0
Kenya Business Accelerator Meshwork User Guide v1.0
 
WCIT Meshwork User Guide v1.0
WCIT Meshwork User Guide v1.0WCIT Meshwork User Guide v1.0
WCIT Meshwork User Guide v1.0
 
Dreamweaver cs6 step by step
Dreamweaver cs6 step by stepDreamweaver cs6 step by step
Dreamweaver cs6 step by step
 
Image Handling: Understanding the Basics of WordPress Media
Image Handling: Understanding the Basics of WordPress MediaImage Handling: Understanding the Basics of WordPress Media
Image Handling: Understanding the Basics of WordPress Media
 

Recently uploaded

RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
moinahousna
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
digitalxplive
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
Shiv Technolabs
 
Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...
chetankumar9855
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Muhammad Ali
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
Salesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot WorkshopSalesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot Workshop
CEPTES Software Inc
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
HackersList
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 

Recently uploaded (20)

RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
 
Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
Salesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot WorkshopSalesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot Workshop
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 

Technology Plan for new 4SiteStudios.com

  • 1. Story Section Description Solution Questions A user can see a visual representation of recent projects on the homepage. Homepage A user visiting the homepage can see a dynamic grid of images representing recent featured 4Site projects. Interspersed among the images is a brief block of introductory/branding message text. When the user hovers over an image, a tooltip with the project title will display. When the user clicks on an image, it will increase in size, and a description of the project and a "learn more" link will be overlaid on top of the image. Build a view to create a nested series of DIVs containing the images and related metadata. Use the Masonry or Isotope JS libraries to control layout. A user can see a visual representation of the services 4Site offers on the homepage. Homepage A user visiting the homepage can see images or icons representing the services 4Site offers. One image will be larger than the others, representing a "featured" service. When the user hovers over an image, the image will animate to illustrate some aspect of that service. When the user clicks on the image, they will be taken to a page offering more information about that service. Build content type for Services, with two fields to contain the small and large images (each image will be a sprite containing both the static and animated versions of the image). Create a view to display the images, each linked to that service's page. A user can see a video with more informaton about 4Site Studios. Homepage A user visiting the image can see a static image from 4Site's brand video, with a "play" icon overlaid. When the user clicks the image, the image will turn into an embedded video player and play the brand video. Use Vimeo embedded player. A user can see a paged listing of recent blog posts and other resources on the homepage. Homepage A user visiting the homepage can see summaries of the three most recently posted blog posts or resources. A pager will allow the user to navigate to earlier items. Each summary will contain the title of the resource a summary of the body, the post date, the type of resource, a thumbnail image from the post, and a thumbnail image of the post's author. Build a view to display a paged summary of the most recently published nodes in the blog post and resource content types. A user can see 4Site's most recent Tweet on the homepage. Homepage A user visiting the homepage can see the most recent tweet from the @4SiteStudios account. At the bottom of the tweet are "web intent" icons allowing the user to reply, retweet or favoritethe tweet. To the left of the tweet, a large Twitter icon will link to the main @4SiteStudios Twitter page. Use Twitter module. A user can sign up for 4Site's email newsletter. Footer A user can see in the site footer a newsletter signup form. The form should contain a text box for the user's email address and a submit button. Upon submitting the form, the entered email address should be added to 4Site's Mailchimp list. Embed Mailchimp form in a static block. A user can navigate to 4Site's various social media presences. Footer A user can see in the site footer a series of icons representing various social media networks. Upon clicking an icon, the user should be taken to 4Site's presence on that network. Embed social media icons and links in a static block. A user can search for content on the site. Footer A user can see in the site footer a magnifiying glass or other "search" icon. Upon hovering over or clicking the icon, a seach form and submit button will appear. Upon submitting the form, the user will see a search results page, with the query being the data that was entered into the form. Configure Drupal core search. A user can navigate to other pages on the site. Footer A user can see in the site footer a menu containing links to the top-level pages on the site, and follow those links. Core functionality. User Stories 1
  • 2. A user can see a "Hire Us For Your Project" button on any page, that moves down the homepage as the user scrolls. Header A user can see a button labeled "Hire Us For Your Project," that moves down the page as the user scrolls. When the button is clicked, the user will be taken to a "Hire Us" webform. Set CSS for button to fixed positioning. (Depending on where the button is in the layout, we may need to add jQuery to switch between fixed and absolute positioning once the user scrolls beyond a certain point.) A user can send an email to 4Site. Header A user can click an eimail icon in the site header and see a pop-up "contact us" form, containing fields for name, email address, subject, body text, and a CAPTCHA. When the user submits the form (assuming it passes CAPTCHA), the contents of the form will be emailed to [TBD]@4sitestudios. com. Write a small custom module to create and process contact-us/hire-us form, which will appear differently (different fields displayed, etc.) depending on context. A user can navigate to other pages on the site. Header A user can see in the site header a menu containing links to the top-level pages on the site, and follow those links. Core functionality. A user can contact 4Site about a project. Services A user can see (at the bottom of the Services page or by clicking a "hire us" link) a form containing text fields for name, organization, email address, body text, a dropdown for project budget, date fields for desired start and end dates, and a submit button. Upon successful form submission, the contents of the form will be emailed to [TBD]@4sitestudios. com. Use custom module created for "contact us" form. No visible CAPTCHA in the wireframe - how do we protect against unauthorized form submissions? Mollom? A user can see the navigation menu persist as they scroll down any page on the site. Misc A user scrolling down any page on the site can continue to see the page navigation as they scroll. Add jQuery to switch menu div between fixed and absolute positioning depending on scroll position. A user visiting the Our Work page can see a display of client logos, or click a link and see a text list of clients instead. Projects A user visiting the Our Work page can see a display of selected client logos. The logos dynamically position themselves in order to minimize vertical gaps. The user can click a link to see a text list of all logos. Create a views display to display logo field of the client content type (for nodes with "promote to front page" checked) within a masonry grid, and a second views display to create a text list of all clients. A user visiting the Our Work page can see a gallery of project images. Projects A user visiting the Our Work page can see a gallery of project images. The user can toggle between all projects and only those with case studies, or filter the gallery by project type or cause. Upon being filtered, the images in the gallery will dynamically reposition themselves so as to minimize vertical gaps. The user can display more projects by scrolling down. When the user hovers over an image, an overlay will appear over the image, displaying the title of the project, the client name, and a brief description of the project. When the user clicks on the image/overlay, a page will display with more information about the project. Create a view to display project images within divs, with project title, client name, description and more link rendered in a div that is hidden until revealed upon mouseover. Add exposed filters for projects with case studies, project type, and cause. Add Masonry JS w/ infinite scroll to control layout. If some of the images are really thumbnails for videos, how does the user play the video? The onClick behavior will display the overlay. A user can see a project detail page. Projects A user clicking a "more" link on the Our Work page can see a page with details about the selected project. The page will include a gallery of images from the project, the title of the project, the client logo, a brief client testimonial, and three blocks of text, each with a thumbnail image: The Challenge, Our Solution, and The Results. Theme project node page using Control Display, template files, alter hooks, or preprocess functions, depending on requirements of graphic design. User Stories 2
  • 3. A user can see a Products page and learn more about Hub and Dub. Products A user visiting the Products page can see a tabbed listing of products (currently Hub and Dub). Clicking a product in the tab will cause the page below to shift to display the content for the selected product. Below the menu tabs is displayed an image and description for the selected product, followed by a list of features. For each feature, the feature name, a brief description, and an icon or image are displayed. Create a view to display all nodes of the product/service content type that have "product" selected, with only the product selected in the menu tabs displayed. A user visiting the Products page can sign up to learn more about Hub. Products A user visiting the Products page can see a form containing fields for name, organization, email address, and phone number, and a submit button. Upon successfully submitting the form, the contents of the form will be emailed to [TBA] @4sitestudios.com. Use custom module created for "contact us" form. Display through a static block attached to the bottom of the content area. Should we put this into a database as well? Can we automatically put this into Salesforce? A user can see a "What we Do" page and learn more about the services 4Site provides. Services A user visiting the "What We Do" page can see a series of service icons. Clicking an icon will cause the page below to shift to show content for the selected service. Below the icons is displayed an image and description for the selected service, followed by a list of capabilities. For each capability, the capability name, a brief description, and an icon or image are displayed. Create a view to display all nodes of the product/service content type that have "service" selected, with only the service selected in the menu tabs displayed. A user can see a "Who We Are" page with information about the company and its employees. Who We Are A user visiting the Who We Are page can see introductory text, an embedded brand video, an animaged GIF of the 4Site logo, text about 4Site, a graphical display of 4Site employees with an image and links to their social media profiles, a graphic describing our process, and text and graphics describing our community contributions. Create basic page with introtuctory text, brand video, logo GIF, and body text in body. Create View to display staff listing and attach block below main content. Create static blocks to display Process and Giving Back content and attach below staff listing block. A user can see an "Our Insights" page with summaries of recently posted insights (blog entries, white papers, case studies, and training videos). Insights A user visiting the Our Insights page can see a large image preview text and author thumbnail of a featured insight, followed by an "infinite scroll" display of previews of all insights. Each preview includes an image, title, summary, post date, insight type, and author thumbnail. The display is filterable by insight type and topic. Create a view to display all nodes of the blog entry and resource content types, in reverse chronological order, with exposed filters for resource type and topic. Create a second views display, attached to the header of the first view, to show the single most recently posted blog entry/resource with "promote to front page" set. A user can read an insight, post a comment, or share it to social media. Insights A user visiting an insight page can see a large image related to the post, the post title, post date, insight type, author thumbnail, summary, post text with embedded images, social media icons, and an embedded Disqus comment block. Create custom page templates for each content type. Create custom theme function to display social share icons. User Stories 3
  • 4. Content Type and Fields Field Type Widget Required Basic page Title Node module element Body Long text and summary Text area with summary Attachment File File Blog Entry Title Node module element Media Fieldset > Image Image Media file selector > Video File Media file selector > Caption Long text Textarea Body w/ Summary Long text and summary Text area with summary Attachment File File Additional Information (Link) Link Link Related Content Entity Reference Autocomplete Topic Term Reference Select list Service Term Reference Select list Project Project Name Node module element Short Description Long text Textarea Client Testimonial Long text Textarea Challenge Long text Textarea Challenge Thumbnail Image Media file selector Our Solution Long text Textarea Solution Thumbnail Image Media file selector The Results Long text Textarea Results Thumbnail Image Media file selector Topic Term Reference Select list Service Term Reference Select list Client Term Reference Autocomplete Cause Term Reference Select list Client Client Name Node module element Client Logo Image Media file selector Cause Term Reference Select list Service/Product Service Name Node module element Product/Service? List (text) Select list Product/Service Icon/Image Image Media file selector Content Types 4
  • 5. Description Long text Textarea Features/Capabilities Field Group (field_group_multiple?) > Feature/Capability Title Text Text field > Feature/Capability Description Long text Textarea > Feature/Capability Image Image Media file selector Resource Title Node module element Body Long text and summary Text area with summary Attachment File File Media Fieldset > Image Image Media file selector > Video File Media file selector > Caption Long text Textarea Resource Type Term Reference Select list Topic Term Reference Select list Service Term Reference Select list Client Term Reference Autocomplete Cause Term Reference Select list Require Registration Before Viewing? Boolean Checkbox Bio Name Node module element Title Text Text field Bio Long text Textarea Fun Fact Long text Textarea Photo Image Media file selector Twitter Link Link LinkedIn Link Link Service Term Reference Select list Webform Title Body Content Types 5
  • 6. Vocabulary Name Description Example Terms Additional Fields Notes Topic Shared fixed vocabulary across all blog posts, resources, and services. NTEN Conference, DrupalCon 2013, Content As Media Webinar Series Services Relates a piece of content to a specific department or service that was delivered. Services will have a two-level hierarchy, with top level terms representing our divisions (Strategy, Video, Design, Development, Support), and second level terms representing the services offered within each division. Design - Branding/Logos - Website Design - Mobile App Design - Infographics/Visual Content - Print Collateral Development - Website Development - Mobile Development - Video Applications - CRM Integration Strategy - Content Strategy - User Experience - Management and Optimization - Analytics and Reporting Support Video - Commercials - Edutainment - Animation - Event Videography - Grassroots Video Image: Small Image (sprite with both static and animated version) Image: Large Image (sprite with both static and animated version) Client Tagging vocabulary for clients. NetCentric Campaigns National Building Museum Say Yes to Education Image: Client logo Cause Description of the type or cause we were working for. Advocacy Science and Technology Resource Type Describes the type of resource White Paper Case Study Tutorial Video Blog Post Taxonomy 6
  • 7. Module Name Used For Version Requirements/Dependencies Download Notes Masonry Homepage, Projects Views Infinite Scroll Projects, Insights Twitter 7.x-5.8 OAuth OAuth 7.x-3.1 Library Name Used For Version Requirements/Dependencies Download Notes Masonry or Isotope Homepage, Projects http://masonry.desandro.com/jquery.masonry.min.js Custom Module Name Used For Requirements/Dependencies Download Notes 4site_contact contact-us form, hire-us form Modules to Remove Download Notes Activity Stream Advanced Help Flexslider Flippy Fullcalendar Geocoder Geofield Geophp Mollom Nice Menus Nodequeue Print Profile2 ReCAPTCHA Soundcloud Filter Splashify Modules 7