Global Data Science Forum

Expand all | Collapse all

Presentation

  • 1.  Presentation

    Posted Mon November 11, 2019 09:47 PM
    Hello I am new here, and I am trying to learn programming language to improve the presentation of very rudimentary websites I create, like this: https://plpintom-h.com/

    I don't know if I'm in the right place, but I'm reading the articles that you are here and I hope to learn some things that will be useful to me.
    Best regards,
    Pedro


    ------------------------------
    PedroPinto
    ------------------------------


  • 2.  RE: Presentation

    Posted Tue November 12, 2019 10:50 AM
    Edited by David Vicenteño Tue November 12, 2019 10:50 AM
    Hi Pedro, I think the easisest way to imprve the presentation of your websites are implementing css on the html code, you can learn using css in some pages like https://www.w3schools.com/css/ and then you can use some cool css frameworks like bulma https://bulma.io/ , I hope this info can be usefull for you, Greetings.

    ------------------------------
    David Vicenteño
    ------------------------------



  • 3.  RE: Presentation

    Posted Tue November 12, 2019 02:32 PM
    Yes, that's what I use, CSS, but there are things that help position better on google that doesn't work just with CSS

    ------------------------------
    PLPinto.M.
    ------------------------------



  • 4.  RE: Presentation

    Posted Wed November 13, 2019 08:42 AM
    Great suggestion David!

    Another wonderful "Responsive" CSS Framework is bootstrap...  for some quick look -N- feel examples you can look here: https://getbootstrap.com/docs/4.0/examples/ 

    (https://getbootstrap.com/docs/4.0/examples/)

    Bryce C. Crapse
    Solution Architect, Data and AI Expert Labs & Learning
    IBM
    Mobile: 801.830.0065
    bcrapse@us.ibm.com







  • 5.  RE: Presentation

    Posted Wed November 13, 2019 10:04 AM

    Yes, the basis of the system that I use is this,
    to which I have been adding and adapting some features that I have researched and learned.

    Thank you all for the suggestions,
    Pedro



    ------------------------------
    PLPinto.M.
    ------------------------------



  • 6.  RE: Presentation

    Posted Wed November 13, 2019 12:37 PM

    I started using responsive sites several years ago when google said it was mandatory. At that time there was almost nothing that worked, and was compatible with the Microsoft Expression Web.

    I use an "Responsive Grid System" of 12 columns that I no longer remember where I copied it. But I changed the settings to only use the combinations of 6 and not all the combinations (12) the system used – I only use 2 of 6 / 4 of 6, etc.

    Example:

    <div class="section group">

                                                                                  <div class="col span_4_of_12">

                                                                                  xxxxxxxxxxxxxx

                                                                                  </div>

                                                                                  <div class="col span_3_of_12">

                                                                                  xxxxxx

                                                                                  </div>

                                                                                  <div class="col span_5_of_12">

                                                                                  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

                                                                                  </div>

                                                                                  </div>

     

    And the CSS codes I was creating as I needed some new function. I research the commands that do the effect I want, and then add they to my CSS, with a proper name for me to identify.

    I was building this CSS over time, with the codes I needed, and combining some of them to create the effect I wanted. So, I only use what I need and get it lighter to load the file faster.

    There is nothing like it, because I created it from various commands and, as I am Portuguese, I give Portuguese names to identify.



    ------------------------------
    PLPinto.M.
    ------------------------------



  • 7.  RE: Presentation

    Posted Wed November 13, 2019 12:54 PM
    All my websites have the same CSS, not only the https://plpintom-h.com/  except some blogs on Wordpress

    ------------------------------
    PLPinto.M.
    ------------------------------



  • 8.  RE: Presentation

    Posted Wed November 13, 2019 01:10 PM
    Hi Again Pedro,

    Yes, the Grid of 12 is very popular, particularly in Bootstrap framework.  Along with size of the viewport (sm, md, lg, etc...) then the sm-3 makes sense...  Small 3 out of the 12, in the grid, etc...  That way the "Responsiveness" shows up better, wraps more smoothly, scales images, etc...  (With an understanding that there are to be edits to the CSS as you pointed out.)

    For the ui components I would certainly revisit a Framework approach.  I think that "Speed" is no longer an issue, particularly with the popular frameworks!  The images will be much, much, larger than the CSS...  :)

    That said, I would give a Framework a try, and for your "Pet's" page I would make all the grid (that you currently have) into CSS-Cards...  They look so much nicer, pop off the page and arrange themselves very well.  I might even have a tabbed control on top (below the Header/menu bar, to allow the user to select "Type" of pet they want to learn about... Right now, I think you have Snakes....  Very nice!

    Thanks!  Hope this helps!


    Bryce C. Crapse
    Solution Architect, Data and AI Expert Labs & Learning
    IBM
    Mobile: 801.830.0065
    bcrapse@us.ibm.com







  • 9.  RE: Presentation

    Posted Wed November 13, 2019 01:33 PM
    Yes, Bryce, in English I only have snakes.
    But the Portuguese and Spanish is already more complete.

    Thanks for the advice,
    Pedro

    ------------------------------
    PLPinto.M.
    ------------------------------