Alpha Software Mobile Development Tools:   Alpha Anywhere    |   Alpha TransForm subscribe to our YouTube Channel  Follow Us on LinkedIn  Follow Us on Twitter  Follow Us on Facebook

Announcement

Collapse

The Alpha Software Forum Participation Guidelines

The Alpha Software Forum is a free forum created for Alpha Software Developer Community to ask for help, exchange ideas, and share solutions. Alpha Software strives to create an environment where all members of the community can feel safe to participate. In order to ensure the Alpha Software Forum is a place where all feel welcome, forum participants are expected to behave as follows:
  • Be professional in your conduct
  • Be kind to others
  • Be constructive when giving feedback
  • Be open to new ideas and suggestions
  • Stay on topic


Be sure all comments and threads you post are respectful. Posts that contain any of the following content will be considered a violation of your agreement as a member of the Alpha Software Forum Community and will be moderated:
  • Spam.
  • Vulgar language.
  • Quotes from private conversations without permission, including pricing and other sales related discussions.
  • Personal attacks, insults, or subtle put-downs.
  • Harassment, bullying, threatening, mocking, shaming, or deriding anyone.
  • Sexist, racist, homophobic, transphobic, ableist, or otherwise discriminatory jokes and language.
  • Sexually explicit or violent material, links, or language.
  • Pirated, hacked, or copyright-infringing material.
  • Encouraging of others to engage in the above behaviors.


If a thread or post is found to contain any of the content outlined above, a moderator may choose to take one of the following actions:
  • Remove the Post or Thread - the content is removed from the forum.
  • Place the User in Moderation - all posts and new threads must be approved by a moderator before they are posted.
  • Temporarily Ban the User - user is banned from forum for a period of time.
  • Permanently Ban the User - user is permanently banned from the forum.


Moderators may also rename posts and threads if they are too generic or do not property reflect the content.

Moderators may move threads if they have been posted in the incorrect forum.

Threads/Posts questioning specific moderator decisions or actions (such as "why was a user banned?") are not allowed and will be removed.

The owners of Alpha Software Corporation (Forum Owner) reserve the right to remove, edit, move, or close any thread for any reason; or ban any forum member without notice, reason, or explanation.

Community members are encouraged to click the "Report Post" icon in the lower left of a given post if they feel the post is in violation of the rules. This will alert the Moderators to take a look.

Alpha Software Corporation may amend the guidelines from time to time and may also vary the procedures it sets out where appropriate in a particular case. Your agreement to comply with the guidelines will be deemed agreement to any changes to it.



Bonus TIPS for Successful Posting

Try a Search First
It is highly recommended that a Search be done on your topic before posting, as many questions have been answered in prior posts. As with any search engine, the shorter the search term, the more "hits" will be returned, but the more specific the search term is, the greater the relevance of those "hits". Searching for "table" might well return every message on the board while "tablesum" would greatly restrict the number of messages returned.

When you do post
First, make sure you are posting your question in the correct forum. For example, if you post an issue regarding Desktop applications on the Mobile & Browser Applications board , not only will your question not be seen by the appropriate audience, it may also be removed or relocated.

The more detail you provide about your problem or question, the more likely someone is to understand your request and be able to help. A sample database with a minimum of records (and its support files, zipped together) will make it much easier to diagnose issues with your application. Screen shots of error messages are especially helpful.

When explaining how to reproduce your problem, please be as detailed as possible. Describe every step, click-by-click and keypress-by-keypress. Otherwise when others try to duplicate your problem, they may do something slightly different and end up with different results.

A note about attachments
You may only attach one file to each message. Attachment file size is limited to 2MB. If you need to include several files, you may do so by zipping them into a single archive.

If you forgot to attach your files to your post, please do NOT create a new thread. Instead, reply to your original message and attach the file there.

When attaching screen shots, it is best to attach an image file (.BMP, .JPG, .GIF, .PNG, etc.) or a zip file of several images, as opposed to a Word document containing the screen shots. Because Word documents are prone to viruses, many message board users will not open your Word file, therefore limiting their ability to help you.

Similarly, if you are uploading a zipped archive, you should simply create a .ZIP file and not a self-extracting .EXE as many users will not run your EXE file.
See more
See less

Web Page development

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    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
    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
    .

    Comment


      #3
      Re: Web Page development

      I've had some good luck with Adobe Fireworks.

      Comment


        #4
        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

        Comment


          #5
          Re: Web Page development

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

          Comment


            #6
            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

            Comment


              #7
              Re: Web Page development

              Thanks Lyle

              Comment


                #8
                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?

                Comment


                  #9
                  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
                  .

                  Comment


                    #10
                    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?

                    Comment


                      #11
                      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

                      Comment


                        #12
                        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, 03:14 PM.

                        Comment

                        Working...
                        X