Chief Delphi - Site Design

Chief Delphi (http://www.chiefdelphi.com/forums/index.php)

- Website Design/Showcase (http://www.chiefdelphi.com/forums/forumdisplay.php?f=64)

- - Site Design (http://www.chiefdelphi.com/forums/showthread.php?t=77556)

Hi everyone, I was wondering what program you all use for your websites? And if someone can help me explain the concept behind drupal. Thanks, mucho appreciated :)

Drupal is a very powerful CMS (Content Management System). It is a framework that takes care of all the background mechanics of a website and allows you to concentrate on content building.

Drupal is open source, so there is a very large community of users that share designs and modules. There are many online tutorials and demos.

Zappos.com is powered by Drupal.

The downside to any CMS is that the tend to be targeted by link spammers and hackers. Both the good guys and the bad guys have access to the source code. You must keep the code up to date. Don't rely on your host to do it, you need to stay on top of it.

Drupal has a steep learning curve. It can be frustrating to use, until you get used to it. There are many CMS's available. Wordpress, Moveable type, etc

This discussion from WebmasterWorld may help you decide on using Drupal.

My team uses Notepad and MSPaint with Filezilla for the server stuff =)
However bad our site looks now, the web team is learning html, css, php, and javascript instead of downloading a template or running a program to do it. I personally like Notepad++ because its open-source and has multiple languages and syntax highlighting.

Quote:

Originally Posted by stevenngo (Post 862319)

Hi everyone, I was wondering what program you all use for your websites? And if someone can help me explain the concept behind drupal. Thanks, mucho appreciated :)

As with everything it depends on what you want it to do and how hard you want to work.

Some people insist on using Notepad, other people install a CMS, yet others use hosted services such as tumblr. Obviously if you want ABSOLUTE control over every aspect you should code the whole site from scratch using notepad or notepad ++ (or any plain text editor) If you just want to have a site up and running and be able to update it without worrying about how I would use either a hosted service or one of the aforementioned CMS.

As for me, I use Visual Studio at work, we do a lot of vbscript (Im actually sad to admit that) At home I use Textmate (very nice Mac text editor) and am trying to learn how to do asp.net and c# using Visual Studio.

Don't be intimidated by people saying that REAL programmers use notepad (or butterflies) A REAL programmer uses the tool which allows them to most efficiently achieve their goals. The first step is defining your goals, do you want a site up quickly and easily? Do you want to learn how the tools work?

Quote:

Originally Posted by Andrew Schreiber (Post 862338)

Don't be intimidated by people saying that REAL programmers use notepad (or butterflies) A REAL programmer uses the tool which allows them to most efficiently achieve their goals. The first step is defining your goals, do you want a site up quickly and easily? Do you want to learn how the tools work?

I agree with Andrew here. Do what fits you best: try out as many options as possible and pick what works. there's been several threads on web tools, feel free to use the search function on the forums.

What you should use to design and implement your website really depends on
a. The type of site you want
If you want to create your site 100% from scratch (which is a ton of work) I would recommend using the Adobe design suite (if you have money to burn) or otherwise, use Burnmeister's setup of M$ Paint and Notepad.

However, if you want to expend a significantly less amount of effort & time, I would recommend a CMS. Some of the big ones are Drupal, like you mentioned, and Wordpress, which I would recommend. These CMS sites are relatively customizable, but not near the extent that a fully custom site is.

b. (and this is a big one) How much time you are willing to spend
As a general rule, CMS sites take much less time and effort to maintain and create than a site that you made yourself. CMS's tend to facilitate the updating and creating process for you.

Also, I would not recommend tackling any kind of website project without a team of people to help you. This year, I did about 95% of a completely new site by myself, and it just about killed me. I spent probably 300-400 hours on our site, and that was just to get it up and running, not counting updates.

Hope this was helpful
-Eric, 159

The best thing about a decent CMS (like Drupal or Joomla) is that it is substantially easy to give multiple people access to various different parts and pieces. And enabling or disabling a feature on the site is usually a matter of a click or two.

For instance perhaps you only want Developers to format the site, but you want Mentors and Team Members to have be able to create content, and you want Moderators to be able to edit everyone's posts, while simultaneously havng both private and public blogs and portions... Writing that is a pain from scratch, but in Drupal takes me about a day and a half to set up a new site from scratch.

We use Drupal on multiple sites. The FTC site (http://www.technoguards.org) is the least advanced of them, but we only have three members. We are able to use the blog feature of Drupal, and taxonomy (categories) to completely set up our engineering notebook. It is all done online. The only time we use paper is when we print it out for competition.

The most advanced is actually the FLL team's (http://www.legoguards.net) because we have different privileges for team members, mentors, parents, webmaster, etc. Plus we have multiple blogs that are only available to team members and above.

Our prior site was PHP based and has a pretty decent blog attachment to it.

We are moving to a wiki based (using mediawiki) site for a number of reasons:

Websites are 10% look and 90% content. There was a huge effort to get the look right in the past that took away from getting content in.
Anyone on our team can add and edit content. They don't need to have any PHP experience. The wiki markup is much easier.
Page linking is easy. It's very easy for us to decide to add a cross link to another page and in seconds to have it done
For free we get links at the top of pages to sections that follower farther down in the page.
Free searching. Want to know about drive trains, just put drive train in the search box
We get forward / back link checking, we can see what pages link to others, and what pages have been ophaned.
Anyone can enter content. Yes this is here twice but we are planning that all of the sub-component groups (drive,game,electrical,programming, etc) to update every few days in the build season. The wiki makes it easy for multiple preople to edit the same page.
If we decide to change the look and feel then the wiki "skin" takes care of that, I don't need to worry about custom PHP code or CSS code someone may have put on one of their pages.

Granted all of the above points can be managed in a CMS based site, but there is more administrative work that needs to be done.

Foster

Our school is an Engineering/Design school and as such we have access to Adobe CS3. So when we built our website it was a combination of Dreamweaver CS3, Illustrator and Photoshop.

If you don't have access to Adobe products a great alternative is Notepad (like everyone else has said) but instead of MS paint you can use Gimp http://www.gimp.org/

Gimp is attempts to be a freeware version of photoshop. Granted it's not the best but it's great for what you pay for (nothing!).

I believe that my team uses DreamWeaver.

Quote:

Originally Posted by likzuz (Post 862523)

but instead of MS paint you can use Gimp http://www.gimp.org/

Gimp is attempts to be a freeware version of photoshop. Granted it's not the best but it's great for what you pay for (nothing!).

There's a free plugin for Gimp called "Gimpshop" (you can google it) and it skins gimp so it has the same interface as Photoshop (not CS3, but a previous version).

Also, an inexpensive (but not free) program that is really good for web-type graphics development is Paint Shop Pro - IMHO it's the best for the money option.

Quote:

Originally Posted by NalaTI (Post 862548)

The Aviary at a.viary.com is also a low cost photoshop alternative and includes a swatch maker, vector editor among other in-dev. products. its really cool, although its more towards daily users not one-time or short-time image editors.

of course all of the free(or cheap)ware tools can be just as good as any other and it depends on the user.

Several team sites are done in Wordpress. While technically a blog engine rather than a CMS, the Static Pages feature is adequate for most people's needs, and it's a very powerful blogging tool. It's extendable with plugins and themes, allowing for lots of customization and features, completely free, and you can edit any page from any web browser if you have an account for it. I'm making a prototype site in Wordpress to replace my team's current Frontpage format.

Another photoshop alternative is a souped-up version of MSPaint called Paint.NET It's pretty nice and hasn't given me any trouble.get

Hi there,

I think the background of your site is good the color and design is also nice. If you give red color on top it will look more better.

One of my friends at school and i built the RiverdaleRobotics site from the ground up using PHP and MySQL. all pages (in multiple languages) are editable through a simple web interface :Click here for the content entry demo

it took us quite a while to get the system running at 100%, but, now it's great, and super easy to use.

we also have an inventory system, and as mentioned before, Multiple languages.

all members on the team have accounts, which are used to access an email system, and the member pages (so team members can edit their own bios)

the ENTIRE site was written by us (ok, fine, not the menus, they came from DynamicDrive.com, but are heavily modified) and we're trying to get rid of the google stuff which kills validation.

everything was written in text editors with auto-highlight (more usefull than you think) and lots of trial and error.

the homepage ishttp://riverdalerobotics.com/

the demo page is http://riverdalerobotics.com/?demo&page=demo

if people want copies of bits of the source, wait a month or so, as we're about to do a massive overhaul of the back end (to make the source more compact and sensible...) after that, PM me, and we can talk...

overall, i like being in full control of the site, sometimes that can make all the difference, but then again, with power comes responsibility, and maintenance! so you have to be prepared to work. a lot.

-Z

It's interesting to see that your page information is in a simpler markup (like a wiki markup) to make it easier format the page. Did you write the parser / formatter from scratch?

Do you store the page in the database as the simplified markup?

Quote:

Originally Posted by ZInventor (Post 863670)

I know you arent asking for reviews, but that parser is very, very good. Very wikipediesqe. see its so good it make me make up a new word.

Personally i use photoshop to make the graphics, and NetBeans to make the php code. Yes netbeans- it works VERY well. and it has built in source control. and its free (:

as for the engine, a while back i made my own collection of building blocks based on websites i had designed (news, calendars, picture libraries, blogs, AJAX comms, etc), so i basically make a copy of that folder and do some slight modifications to tailor them to the specific site im making. Im able to churn out most websites in 24 hours of work (so far, since i usually end up designing a new component)

Quote:

Originally Posted by Foster (Post 863677)

The parser was written by us, in php, based off the wiki system (but we didn't like how that worked to we threw it away and built our own from the ground up)

everything is stored in a MySQL database in the non-parsed format.

here's some of the current (not cleaned up) code running the parser.

PHP Code:


		
			
function panda_parse($text) {

    global $panda;

    // If $text is in string form, split it into an array of lines.

    if (is_string($text)) {

        $text = str_replace("\r\n", "\n", $text);

        $text = str_replace("\r", "\n", $text);

        $text = explode("\n", $text);

    }

    // Prepare an array to hold the parsed lines.

    $parsed = array();

    // Set up a variable to keep track of what tag we're in.

    $this_tag = '';

    // Parse each line.

    foreach ($text as $i => $line) {

        // We'll need access to the lines on either side of the one we're parsing.

        $prev_line = $text[$i - 1];

        $next_line = $text[$i + 1];

        // Prepare a few regular expressions to make things a bit neater later on.

        $regex_table = '/^((!!|\|\|).+?)+(!!|\|\|)$/';

        $regex_img = '/\{\{(.+?)\|(.+?)(\|(\d+)(\|(\d+))?)?(\|left|\|right|\|inline)?\}\}/';

        $regex_just_img = '/^\{\{(.+?)\|(.+?)(\|(\d+)(\|(\d+))?)?(\|left|\|right|\|inline)?\}\}$/';

        // Dashes.

        while (preg_match('/ ?-- ?/', $line, $m)) {

            $line = str_replace($m[0], '&mdash;', $line);

        }

        while (preg_match('/ - /', $line, $m)) {

            $line = str_replace($m[0], '&nbsp;&ndash; ', $line);

        }

        while (preg_match('/\d(-)\d/', $line, $m)) {

            $line = str_replace($m[1], '&ndash;', $line);

        }

        // Tables.

        if (preg_match($regex_table, $line)) {

            if (preg_match($regex_table, $prev_line)) $beginning = "\t<tr>\n";

            else $beginning = "<table class=\"parsed\">\n\t<tr>\n";

            $end = "\t</tr>";

            if (!preg_match($regex_table, $next_line)) $end .= "\n</table>";

            while (preg_match('/((!!|\|\|)((\d+)[>^]){0,2}(.+?))(!!|\|\|)/', $line, $m)) {

                //print '<pre>There is a table cell which is ' . $m[0] . '</pre>';

                $cell_tag = 'td'; $align = $colspan = $rowspan = '';

                if ($m[2] == '!!') $cell_tag = 'th';

                if (preg_match('/^ +(.+?) +$/', $m[5], $m2)) {

                    $m[5] = $m2[1];

                    $align = ' class="center"';

                }

                else if (preg_match('/^ +(.+?)$/', $m[5], $m2)) {

                    $m[5] = $m2[1];

                    $align = ' class="right"';

                }

                else if (preg_match('/^(.+?) *$/', $m[5], $m2)) $m[5] = $m2[1];

                if (preg_match('/(\d+)>/', $m[3], $m2)) $colspan = ' colspan="' . $m2[1] . '"';

                if (preg_match('/(\d+)\^/', $m[3], $m2)) $rowspan = ' rowspan="' . $m2[1] . '"';

                $line = str_replace($m[1], "\t\t<" . $cell_tag . $align . $colspan . $rowspan . '>' . $m[5] . '</' . $cell_tag . ">\n", $line);

            }

            $line = $beginning . $line . $end;

            $line = str_replace("\n||\t</tr>", "\n\t</tr>", $line);

            $line = str_replace("\n!!\t</tr>", "\n\t</tr>", $line);

        }

        // Bulleted and numbered lists.

        else if (preg_match('/^([*#]+)/m', $line, $m)) {

            $num_of_levels = strlen($m[1]);

            $beginning = $end = '';

            if (preg_match('/^[*#]{0,' . $num_of_levels . '}([^*#]|$)/m', $next_line)) $end = '</li>';

            for ($i = $num_of_levels - 1; $i > 0; $i--) {

                if ($prev_line{$i} == $m[1]{$i});

                else if ($m[1]{$i} == '*') $beginning .= "<ul>\n";

                else if ($m[1]{$i} == '#') $beginning .= "<ol>\n";

                if ($next_line{$i} == $m[1]{$i});

                else if ($m[1]{$i} == '*') $end .= "\n</ul></li>";

                else if ($m[1]{$i} == '#') $end .= "\n</ol></li>";

            }

            if ($prev_line{0} == $m[1]{0});

            else if ($m[1]{0} == '*') $beginning .= "<ul>\n";

            else if ($m[1]{0} == '#') $beginning .= "<ol>\n";

            if ($next_line{0} == $m[1]{0});

            else if ($m[1]{0} == '*') $end .= "\n</ul>";

            else if ($m[1]{0} == '#') $end .= "\n</ol>";

            $line = $beginning . '<li>' . substr($line, $num_of_levels) . $end;

        }

        // Headings.

        else if (preg_match('/^!!!/m', $line)) $line = '<h4>' . substr($line, 3) . '</h4>';

        else if (preg_match('/^!!/m', $line)) $line = '<h3>' . substr($line, 2) . '</h3>';

        else if (preg_match('/^!/m', $line)) $line = '<h2>' . substr($line, 1) . '</h2>';

        // Blockquotes.

        else if (preg_match('/^:/m', $line)) {

            $line = '<blockquote>' . substr($line, 1);

            $this_tag = 'blockquote';

        }

        // Paragraphs.

        else if ($line != '' and $prev_line == '' and !preg_match($regex_just_img, $line) and $line{0} != '=') {

            $line = '<p>' . $line;

            $this_tag = 'p';

        }

        // No-paragraph lines.

        else if ($line{0} == '=') $line = substr($line, 1);

        // Close paragraph or blockquote.

        if ($this_tag == true and $next_line == '') {

            $line .= '</' . $this_tag . '>';

            $this_tag = '';

        }

        // Bold italics.

        while (preg_match("/'''''?(.+?)'''''?/", $line, $m)) {

            $line = str_replace($m[0], '<b><i>' . $m[1] . '</i></b>', $line);

        }

        // Bold.

        while (preg_match("/'''(.+?)'''/", $line, $m)) {

            $line = str_replace($m[0], '<b>' . $m[1] . '</b>', $line);

        }

        // Italics.

        while (preg_match("/''(.+?)''/", $line, $m)) {

            $line = str_replace($m[0], '<i>' . $m[1] . '</i>', $line);

        }

        // External links.

        while (preg_match('/\[\[(http[^|]+?)\|([^\]]+?)\]\]/', $line, $m)) {

            $line = str_replace($m[0], '<a href="' . $m[1] . '" class="ext" target="_blank">' . $m[2] . '</a>', $line);

        }

        while (preg_match('/\[\[(http[^\]]+?)\]\]/', $line, $m)) {

            $line = str_replace($m[0], '<a href="' . $m[1] . '" class="ext" target="_blank">' . $m[1] . '</a>', $line);

        }

        // Mailto links.

        while (preg_match('/\[\[([^|]+?@[^|]+?)\|([^\]]+?)\]\]/', $line, $m)) {

            print '<br>Mailto!<br>';

            $line = str_replace($m[0], '<a href="mailto:' . $m[1] . '" class="mailto">' . $m[2] . '</a>', $line);

        }

        while (preg_match('/\[\[([^|]+?@[^|]+?)\]\]/', $line, $m)) {

            $line = str_replace($m[0], '<a href="mailto:' . $m[1] . '" class="mailto">' . $m[1] . '</a>', $line);

        }

        // Internal links.

        while (preg_match('/\[\[([a-z0-9\-_=&]+?)\|(.+?)\]\]/', $line, $m)) {

            $line = str_replace($m[0], '<a href=".?' . $m[1] . '&amp;page=' . $m[1] . '">' . $m[2] . '</a>', $line);

        }

        while (preg_match('/\[\[([a-z0-9\-_=&]+?)\]\]/', $line, $m)) {

            $line = str_replace($m[0], '<a href=".?' . $m[1] . '&amp;page=' . $m[1] . '">' . $m[1] . '</a>', $line);

        }

        // Images.

        while (preg_match($regex_img, $line, $m)) {

            if (!empty($m[4])) $width = ' width="' . $m[4] . '"';

            if (!empty($m[6])) $height = ' height="' . $m[6] . '"';

            if ($m[7] == '|inline') $side = 'inline';

            else if ($m[7] == '|left') $side = 'left';

            else $side = 'right';

            $line = str_replace($m[0], '<img src="' . $panda['imgdir'] . $m[1] . '" alt="' . $m[2] . '" title="' . $m[2] . '"' . $width . $height . ' class="' . $side . '" />', $line);

        }

        // Add this line to the array of parsed lines.

        $parsed[] = $line;

    }

    // Return a single string of HTML.

    return join("\n", $parsed);

}

as you can see, it's pretty crazy, and takes a ton of debugging (the first 100 or so issues were forgotten semicolons!)

we're working on cleaning up this code, but anyone who wants it can use it, but PLEASE put a comment in the HTML of your code that says that you are using some of our stuff, thanks!

-Z

Quote:

Originally Posted by ZInventor (Post 863682)

you should store it in parsed and non-parsed. it would reduce your load times by a lot, and disk space is cheap.

Quote:

Originally Posted by Uberbots (Post 863707)

you should store it in parsed and non-parsed. it would reduce your load times by a lot, and disk space is cheap.

we have a decent speed server, and fast connection, so the load time isn't an issue.

but more to the point here, the thread (as much as i'd like it to be) isn't about my team's site.

if you think this discussion should continue, PM me and i'll start a thread.

-Z