Alpha Video Training
Results 1 to 12 of 12

Thread: Web Page development

  1. #1
    Member
    Real Name
    Steven
    Join Date
    Oct 2011
    Posts
    668

    Default Web Page development

    Just wanted to get some suggestions. I can create web pages with alpha five but am having a hard time creating one that looks really good. Is there a better software for this that then I can import into alpha five? Perhaps Dreamweaver is best?

  2. #2
    Member Rida Alhasan's Avatar
    Real Name
    Felix
    Join Date
    Oct 2010
    Location
    Madrid, Spain
    Posts
    223

    Default Re: Web Page development

    .
    Steven,
    I'm fiddling with Artisteer 4.1 and am getting much better results than plain Alpha Five. Of course, this involves a bit more work but your webpages will look a lot nicer. I'd attach some images but for some reason the forum does not allow me.

    There is also a tutorial (video?) for Alpha Five + Xara somewhere; you'll probably find the link by searching the forum.


    Regards,
    Felix
    .

  3. #3
    Member
    Real Name
    Lee Cook
    Join Date
    Mar 2010
    Posts
    217

    Default Re: Web Page development

    I've had some good luck with Adobe Fireworks.

  4. #4
    Member 2ninerniner2's Avatar
    Real Name
    Lyle
    Join Date
    Mar 2012
    Location
    Calgary, AB
    Posts
    236

    Default Re: Web Page development

    I'm with Felix for Artisteer 4.1.

    Nice thing about it is, if you have a WordPress, Joomla! (or any of the other supported CMSs) site and want your A5 pages to look exactly the same, it is a matter of a couple clicks of the mouse
    Cheers!
    Lyle Chamney
    http://www.2ninerniner2.com/
    Websites rebuilt with WordPress
    http://goodcheapfastwebsites.com/
    Complete, ready to install WordPress websites
    http://snifflevalve.com
    WordPress training and tutorials

  5. #5
    Member
    Real Name
    Lee Cook
    Join Date
    Mar 2010
    Posts
    217

    Default Re: Web Page development

    Do you use a separate server for wordpress and A5 or can you do both on a single server.

  6. #6
    Member 2ninerniner2's Avatar
    Real Name
    Lyle
    Join Date
    Mar 2012
    Location
    Calgary, AB
    Posts
    236

    Default Re: Web Page development

    Lee - One of the main ways I have been doing this is to run an AMP stack on the Win Server where the WAS is installed and install any PHP/MySQL scripts (eFront, WordPress, Joomla!, Prestashop, etc.) there. My "stack of choice" is The Uniform Server (TUS); others here recommend Abyss. For my needs, TUS suffices, and is dead-simple to install, setup and use.

    On one A5 app installation, I have the PHP/MySQL script running on a Linux VPS and remote the database to the Win 2008R2 server where the WAS is installed. This method was chosen because the script has over 1,000 active users and is accessed from geographically remote locations (high arctic) with less-than-spectacular connectivity and the A5 app that fronts the same db is used only internally and by very few users and then, only intermittently.
    Cheers!
    Lyle Chamney
    http://www.2ninerniner2.com/
    Websites rebuilt with WordPress
    http://goodcheapfastwebsites.com/
    Complete, ready to install WordPress websites
    http://snifflevalve.com
    WordPress training and tutorials

  7. #7
    Member
    Real Name
    Lee Cook
    Join Date
    Mar 2010
    Posts
    217

    Default Re: Web Page development

    Thanks Lyle

  8. #8
    Member
    Real Name
    Steven
    Join Date
    Oct 2011
    Posts
    668

    Default Re: Web Page development

    What is the best way to get your created web pages out of artisteer 4 and into Alpha 5? Do you have to import each individual page and image?

  9. #9
    Member Rida Alhasan's Avatar
    Real Name
    Felix
    Join Date
    Oct 2010
    Location
    Madrid, Spain
    Posts
    223

    Default Artisteer into Alpha Five

    .
    Steven,
    These are the steps I do:

    ARTISTEER 4.1
    • Build the website in Artisteer
    • Export the website as Website Template, checking the Zip archive checkbox


    ALPHA FIVE v11
    • Import the Artisteer zip archive into your Alpha Five web project
    • So that the A5 WAS displays your Artisteer files correctly, you have to open them in A5 and then click the Save button (no need to modify anything)


    If you want to embed a component in an Artisteer page, I suggest you:
    • In Alpha Five, open the Artisteer html page
    • Change to Source mode if you are in Wysiwyg mode, so that Alpha Five does not mess your html source code
    • Insert the component (in Artisteer, I place an "X" so that later in Alpha Five I know where to place the component)
    • Save as an a5w page
    • Publish
    • View in your browser


    When displaying in your browser an Artisteer page with an embedded component, you will notice that your page looks like what you built in Artisteer except that parts of the component use the browser's default settings (for example, your buttons). To fix that, you'll have to create an Alpha Five "style" in the css folder, similar to the GrGray style found there. It is not a difficult thing to do, but tricky and time-consuming. I think that there is a guide somewhere on how to build a style but I'm not really sure. Once you have built your own style, remember to type it in the component's Properties - Layout Options -Style name textbox.

    I wrote a short, quick and dirty How To about the subject, using Artisteer 4.0. Now I'm using Artisteer 4.1 and a few things I wrote are no longer necessary (for example, the footer works without deleting certain lines). You can find the document here, but remember that it is a work in progress ...



    Regards,
    Felix
    .

  10. #10
    Member
    Real Name
    Steven
    Join Date
    Oct 2011
    Posts
    668

    Default Re: Web Page development

    Thanks for your help. I am using Artisteer 4.1. I am trying to embed a dialog for user registration. I can embed it fine but when I pull it up the font in the dialog doesn't look like it does in Alpha5 and the submit and reset button doesn't show. Does this have to do with the style you are talking about? I looked at the documentation that you post but not sure how to do it. You said you have to create a 'style' in the css folder of Alpha5. Is this how you fix the dialog to show correctly in Artisteer?

  11. #11
    Member
    Real Name
    Lee Cook
    Join Date
    Mar 2010
    Posts
    217

    Default Re: Web Page development

    I'm not familiar with Artisteer but I've been looking for something to produce HTML pages that I can embed into. I'll check it out.

    For you problem I'd use the inspect element in Chrome or firebug in Firefox to see why you controls are acting up on you. Let me know if you need more help with this

  12. #12
    Member Rida Alhasan's Avatar
    Real Name
    Felix
    Join Date
    Oct 2010
    Location
    Madrid, Spain
    Posts
    223

    Default Re: Web Page development

    Steven,
    Maybe you should print this, it's a bit long ...
    When you say "the dialog doesn't look like it does in Alpha5" I suspect that you are using the WYSIWYG mode when opening the .a5w pages. If that is the case, I suggest you use the Source mode so that Alpha Five does not "mangle" your page.

    My Submit and Reset buttons always show, so I cannot help you on this.

    I am using Artisteer 4.1 and Alpha Five v11 build 3381-4096 to build the web pages and view the result in Firefox 20.

    ASSUMPTIONS
    • You have built an Artisteer website with three pages: Home, Mygrid and Mydialog.
    • You already have a component (for example, a Dialog2 component) that you want to embed in an Alpha Five .a5w page. You also want that page to look like your Artisteer design.


    EXPORT
    In Artisteer, after finishing the design, generate a Website Template and export the files and folders to the Alpha Five project's Default.WebProject folder and then publish the whole project. Or alternatively, generate a zip file and import it into Alpha Five.



    WEBPAGE
    In your Dialog2, go to Properties - Dialog Properties - Style name and leave it blank. Alpha Five will (I think) use GrGray as default.

    Open Mydialog.html, save it as Mydialog.a5w, embed your Dialog2 in this page, save again, publish the page and view it with your browser. You'll see that the overall look resembles what you did in Artisteer but some elements, like the buttons or textboxes of your Dialog2, adopt the browser's default look.



    BUILDING THE STYLE
    Now comes the hard part. It is not really difficult, just time-consuming. But once you get the hang of it, you'll be able to do it much faster. You have to build your own style, such as MyStyle. In the Web Projects Control Panel bar, click on the icon at the far right, the one with an A and a little rectangle. This is the Web Style Builder. Click on Open an Exisiting Style, select GrOlive (in System) and make a local copy of this style with the name MyStyle. This will create a folder --> \Default.Project\CSS\MyStyle .

    In the MyStyle folder:
    • Open style.css and change all references of .GrOlivexxxxxxxxxx to .MyStylexxxxxxxxxx. I use EditPadLite 7 although I guess Window's Notepad will do.
    • Open style.js and change all references of GrOlivexxxxxxxxxx to MyStylexxxxxxxxxx.
    • Copy the \images folder you generated with Artisteer to the MyStyle folder as a subfolder (I don't really remember why, maybe it is not necessary)
    • Create a style_common.css file in the Default.Project\CSS\MyStyle folder. What I place in this file are common definitions I can later use for any other style I build, such as MyStyle_2. This file will contain the css definitions for things such as making a footer that always sticks to the bottom of your webpage (if you want the code, it is --> .art_footer {position: fixed; width: 100%; bottom: 0px;} ).


    The trick is to modify, in \CSS\MyStyle\style.css, only the specific definitions that your component uses. For example, since you use buttons, go to .MyStyleButton and delete all the code between the brackets {} and replace them with what you have in .art-button plus a.art-button in the Artisteer-generated style.css file (not the style.css file that you are modifying right now). The code for .MyStyleButton, in my case, has a total of almost 40 lines!

    So, for buttons, you can get the code here:
    • .MyStyleButton --> .art-button , a.art-button
    • .MyStyleButtonHover --> .art-button.hover, .art-button:hover
    • .MyStyleButtonPressed --> .art-button.active
    • .MyStyleButtonDisabled --> use the same as .MyStyleButton but change the text color to, say, gray (code is --> color: #808080;)

    How do you know which definitions to modify? Open the Web Style Builder (in the Web Projects Control Panel bar, click on the icon at the far right, the one with an A and a little rectangle). Click on Open an Exisiting Style and open MyStyle. Let us suppose you want to modify the label in your dialog. The definition that controls this is .MyStyleDialogLabel. Modify the code using either the Property or Code tabs.

    The bad news is that you have to do this for each part of MyStyle that your component uses: buttons, headers, footers ... The good news is that you'll probably not need to modify many parts and the resulting webpage will look a lot, lot better. If you've got a boss, show the result to him/her, then show the code (he'll be impressed) and ask a raise.



    PLACEMENT
    Now that we have defined MyStyle to our taste and also have a style_common.css file, our next step is to "place" them in our component. In the Dialog2 component's Properties - Dialog Properties - Style name you can directly type: MyStyle. Or, just to make sure that MyStyle is a style that is recognized as such by Alpha Five, click the button at the far right and select it from the pop-up Select Style window.

    Then in the same Properties sheet, scroll down to CSS - CSS linked files and type: CSS/MyStyle/style_common.css



    TIPS
    TIP 1
    Sometime during the whole process, you'll find that you are not totally happy with your Artisteer web template. So you go back to Artisteer, and do some changes. All you have to export to the project is the Artisteer-generated style.css file (if you have included an image, you also have to export the \image folder). When using localhost, just to make the process faster, I directly copy style.css to the project's root in the Webroot, overwriting the existing file.


    TIP 2
    Apart from Artisteer, you can also use the component's styling possibilities. For example, suppose your dialog is an invoice, with a header that is a label control showing the customer's name and you want this name to be in big, blue letters with a semi-transparent shadow. Go to the label control, then to its Properties - Field Properties - Style and type:

    font-size: 40px;color: #6BADEF; font-weight: bold; text-align: right;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);


    Another example: If you are using a Repeating Section in your dialog and you want to make the container semi-transparent with rounded corners, in the RepeatingSection: CONTAINER_XX control, go to Container Begin Properties - Container style and type:

    border-style: solid; border-width: 1px; border-color: #cffbe5; padding-bottom: 12px; padding-left: 12px; padding-right: 12px; padding-top: 20px; border-radius: 7px;background-color:rgba(219,233,215,0.2);

    WARNING
    In Tip 2, second example, if instead of typing directly you click the far-right button with the three dots, some definitions might not be saved. For example, if you define "border-radius: 7px", it disappears (at least, it happens to me).






    I'd post some screenshots of .a5w webpages using Artisteer but the forum does not allow me to upload files. I hope this gets you going in a useful direction.


    Regards,
    Felix
    .
    Last edited by Rida Alhasan; 05-11-2013 at 04:14 PM.

Similar Threads

  1. Web Development: Look and feel
    By Claire Shuttleworth in forum Application Server Version 9 - Web/Browser Applications
    Replies: 15
    Last Post: 01-07-2010, 04:57 PM
  2. new in alpha web development
    By fddizon in forum Web Application Server v7
    Replies: 4
    Last Post: 07-24-2006, 04:30 PM
  3. web development in v7
    By jonlau in forum Alpha Five Version 7
    Replies: 1
    Last Post: 03-01-2006, 09:44 AM
  4. Web Development
    By Louis Nickerson in forum Alpha Five Version 5
    Replies: 5
    Last Post: 08-23-2002, 09:56 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •