Wow, thank you Kevin and Wes for some eye-opening contributions! I really welcome their mind-expanding potential and have been diving into demos and docs all morning. [1]
In my course last night we looked at that Jupyter Notebook comparing ES6 and Python scripts [2] and I also showed them how Python may be used to write HTML + CSS for browser rendering.[3] Output: https://flic.kr/p/PjQ6Bg (screen shot). Some of my students are beginner programmers, with little to no programming background so we're really just going over the basics, but at the same time we need to tune in the ecosystem with is typically a combination of Python + HTML + CSS + JS + SQL + regex at least. I use sqlite3 module for the SQL part, re module for regex. What we have in these resources though is something even more ambitious, including the ability to compile Python to JS! Wow. You know what they say: JS is the assembly language of the web. Even developers using JS full stack use transpilers to go from future JS -> past JS (using Babel mostly). Future JS (from where we stand now) is what looks more Python-like than ever. My current mode of teaching is to have students install the Anaconda distro and then to extend the library with the requests and flask modules for exploring web stuff. Anaconda includes command line conda for using in place of pip, to get packages from a large web of repositories. Now I see conda lets me install mpld3 to my Mac with no issues. mackurner:~ kurner$ conda install mpld3 My teaching application is here: thekirbster.pythonanywhere.com Kirby [1] Kevin, http://pyeverywhere.org/docs/ 404s [2] https://github.com/4dsolutions/Python5/blob/master/Comparing%20JavaScript%20with%20Python.ipynb (that's direct to Github -- nbviewer is having problems right now, no wait it's working again) https://goo.gl/nj9RPO (using nbviewer) renders the JS output whereas Github does not. [3] a chess board generator, just uses string substitution ala str.format( ) method, helps beginners see how HTML + CSS might be string output from a Python script on the server: # -*- coding: utf-8 -*- """ Created on Thu Nov 17 09:02:27 2016 https://flic.kr/p/PjQ6Bg (screen shot). @author: Kirby Urner Run the script and open the output .html file in any browser. """ from collections import namedtuple Piece = namedtuple('Piece', 'type color position unicode') black = [ Piece("Rook" , "black", [7,0], "♜"), Piece("Knight" , "black", [7,1], "♞"), Piece("Bishop" , "black", [7,2], "♝"), Piece("Queen" , "black", [7,3], "♛"), Piece("King" , "black", [7,4], "♚"), Piece("Bishop" , "black", [7,5], "♝"), Piece("Knight" , "black", [7,6], "♞"), Piece("Rook" , "black", [7,7], "♜") ] for c in range(8): black.append(Piece("Pawn", "black", [6,c], "♟")) white = [ Piece("Rook" , "white", [0,0], "♖"), Piece("Knight" , "white", [0,1], "♘"), Piece("Bishop" , "white", [0,2], "♗"), Piece("Queen" , "white", [0,3], "♕"), Piece("King" , "white", [0,4], "♔"), Piece("Bishop" , "white", [0,5], "♗"), Piece("Knight" , "white", [0,6], "♘"), Piece("Rook" , "white", [0,7], "♖") ] for c in range(8): white.append(Piece("Pawn", "white", [1,c], "♙")) the_board = \ """ <table> {white_royals} {white_pawns} {empty_cells} {black_pawns} {black_royals} </table>""" white_royals = "<tr>{}</tr>".format("".join( ["<td>{}</td>".format(piece.unicode) for piece in white[:8]])) white_pawns = "<tr>{}</tr>".format("".join( ["<td>{}</td>".format(piece.unicode) for piece in white[8:]])) black_royals = "<tr>{}</tr>".format("".join( ["<td>{}</td>".format(piece.unicode) for piece in black[:8]])) black_pawns = "<tr>{}</tr>".format("".join( ["<td>{}</td>".format(piece.unicode) for piece in black[8:]])) empty_cells = "" for row in range(4): empty_cells += "<tr>{}</tr>".format("".join( ["<td></td>" for _ in range(8)])) chess_board = the_board.format(white_royals = white_royals, white_pawns = white_pawns, empty_cells = empty_cells, black_royals = black_royals, black_pawns = black_pawns) the_page = \ """<!DOCTYPE html> <html> <head> <style> body { margin-left: 30px; font-size: 20px; } table { border: 1px solid black; border-collapse: collapse; border-color: black; } td { padding: 15px; border: 1px solid black; height: 20px; vertical-align: bottom; } tr:nth-child(even) td:nth-child(odd){ background-color: #FF8040; } tr:nth-child(odd) td:nth-child(even){ background-color: #FF8040; } td:hover { background-color: #FF0000 !important; border-color: blue; } </style> </head> <body> """ + \ chess_board \ + \ """ </body> </html> """ with open("chessboard02.html", "w") as f: f.write(the_page) print("Done!")
_______________________________________________ Edu-sig mailing list Edu-sig@python.org https://mail.python.org/mailman/listinfo/edu-sig
