Vanilla JavaScript Angular, React & Vue Node.js Python & Django PHP npm, Gulp & Grunt HTML & CSS Sass & LESS

Processing

Add color to your design! You can build off the example below or add to your previous design by selecting “My Code from Last Lesson” under the “Code” menu below.

You can work on your own pace, but we recommend approximately ten minutes on this assignment before moving on.

Reminders Set the background color: background(r,g,b); Set the outline color: stroke(r,g,b); Set the interior color: fill(r,g,b);

Don’t forget, you need to call stroke() and fill() before you draw the shape!

r — amount of red, from 0 (none) to 255 (maximum) g — amount of green, from 0 (none) to 255 (maximum) b — amount of blue, from 0 (none) to 255 (maximum) For more, check out the background, stroke and fill pages on processing.org.

Animate your program using mouseX and mouseY! You can build off the example below or add to your previous design by selecting “My Code from Last Lesson” below.

You can work on your own pace, but we recommend approximately ten minutes on this assignment before moving on.

If you forget the syntax for setup() and draw(), here is a reminder!

void setup() { size(500,400); }

void draw() { background(0,0,0); fill(255,255,255); ellipse(mouseX,mouseY,60,60); } We recommend a maximum canvas size of 500 by 400 pixels for this tutorial, but feel free to experiment your window skinnier or shorter!

For more, check out the mouseX and mouseY pages on processing.org.

A Self-Learning, Modern Computer Science Curriculum

https://functionalcs.github.io/curriculum/

Links

https://github.com/kamranahmedse/developer-roadmap

Introduction

Frontend Roadmap

Back-end Roadmap

DevOps Roadmap

https://www.7pace.com/blog/become-a-better-programmer-skills-development

And you must be deliberate in your approach.

No one becomes an accidental master of anything.

It takes focused effort and a clear vision for what it is that you want to accomplish.For developers, there are two categories of fundamentals that are critical to mastery:

Engineering fundamentals

Language/framework fundamentals

For our purposes, we want to focus on the engineering fundamentals.

What does that include?

Things like:

Algorithms

Abstraction

Isolation

Databases

Understand why a fragment of code does what it does

Programming is fundamentally a problem-solving exercise.

It’s about taking in data, understanding context, and formulating the best possible solution.

Probably the most important part of developing any problem-solving ability is repetition and pattern recognition.Read other people’s code

Programming - Intro Binary   ASCII   CSS   PHP   JS   GIT   Ruby on rails   Markdown   HTML   Ruby   BASIC   How programming works   Python   Programming   Terminal   3D   Autocad   CAD   Photogrammetry   Illustrator   Sketchup   DRY (Don’t repeat yourself)  Basic principles   R   Webflow

Scrum Agile Git APIs SEO SEM Internet Dominios Hosting

All programs use basic instructions as building blocks. Here are a few of the most common ones, in English:

• “Do this; then do that.”
• “If this condition is true, perform this action; otherwise, do that action.”
• “Do this action that number of times.”
• “Keep doing that until this condition is true.”

SEO - Search Engine Optimazation

SEM - Search Engine Marketing

Partes de un ordenador

Gulp

Sass

Grunt

GIT a version control system for tracking changes in computer files and coordinating work on those files among multiple people

Python Text in Python is considered a specific type of data called a string.

Informática

2. Configurar una VPN

3. Tener acceso a servidor mediante FTP desde cualquier sitio.

4. Ubuntu y linux

5. Programar en HTML, CSS, JS y Python

6. Introducción

Mobile App Website Web App

---

2. Diseñador

Herramientas: Ilustrator + Photoshop + Indesign Color Usabilidad Fuentes Estructura

---

3. Desarrollador Front-end

HTML CSS - https://www.w3.org/Style/CSS/Overview.en.html (Cascading Style sheets)

Javascript - https://www.javascript.com/

Herramientas: Sublime, Filezilla

---

4. Desarrollador Back-end

PHP - https://secure.php.net/

Ruby - https://www.ruby-lang.org/en/

Ruby on rails - http://rubyonrails.org/

Python - https://www.python.org/

CMS: Wordpress,

---

5. Conocimientos generales

Scrum Agile Git APIs SEO SEM Internet Dominios Hosting

Recortado de: https://gist.github.com/rpattabi/3358726 HTML5 Text Level Semantics reference: http://developers.whatwg.org/text-level-semantics.html#text-level-semantics • a element – anchor. useful to provide a link for a block of content. also helpful for cross reference using id. e.g. a text ad that should have a link wherever it is clicked. • em element – emphasis. emphasizing a particular word or p####ase. e.g. you are not welcome!. not to be confused with i element. typically emphasis changes the meaning of a sentence in a subtle way. think about this example. • i element – change of context. voice, thinking, mood, etc. e.g. “i loved it” not really but can i tell the truth? • strong element – represents strong importance of its contents. does not change the meaning of a sentence. e.g. warning: contents are inflammable. • b – content to draw attention. without adding importance or change in mood or voice. e.g. Ragu and Anu are brothers since birth. • mark – part of text highlighted for reference purpose. may not be intended by original author. e.g. searched word highlighted in search results. • small element – small print. disclaimers, caveats, legal restrictions or copyrights. meant for short runs of text only. when legal info becomes main content, it should not be marked as small. also it doesn’t mean low importance. small content can be marked as strong. e.g. violation of this rule is unacceptable • s element – content no longer relevant or accurate. not to be confused with del. e.g. MRP Rs 100; Our price Rs 99.99 • del element – removal from document. e.g. todo list done entries. • cite – citation. title of the quoted content from elsewhere. referred content. not to be confused with quote q element. it is only title. • q – quoting something. should not include quotation marks. it is work of styling. • dfn – definitions. just as in the beginning of formal documents. e.g. MRB • abbr – marks something as abbreviation. title attribute is optional to provide the expanded version of the abbreviation. • data – provides machine readable form of content. e.g. patthu is the tamil word for ten. also see time`. • time – special case of data. date, time, time zone, etc. e.g. 2012-08-15. • code – computer source code. e.g. The code element represents a fragment of computer code. • var – variable. placeholder. e.g. Rs 25 x qty = total. • samp – sample program output. e.g. Output: Hello World! • kbd – user input. e.g. Ctrl+F4 or File | Exit • sub and sup – sub and superscripts respectively. not for styling (branding LaTeX). Only to be used if the superscript and subscript meaning is important. e.g. E=MC² • ruby – nothing to do with ruby language. useful in case of parallel annotation with the content. e.g. english transliteration over tamil words in a sentence. • span – means nothing. used with global attributes such as class, lang, or dir. e.g. In Tamil, we greet with vaanga. Another e.g. def initialize. • br – line break. not actually meant for styling/presentation. again meant for meaning. useful for poetry, address, etc. • wbr – line break opportunity. useful in source code markup. e.g. def a_method(param1, param2, param3) for usage summary look here. Sections reference: http://developers.whatwg.org/sections.html#sections • body – main content of the document. just one per page. • section – parts of the document. e.g. home page can be split into intro, news items, contact info, etc. tabbed box can have different section for each tab, chapters. • article – useful for syndication. independently distributable or reusable. e.g. forum post, blog post, etc. article may have sections. sections can have articles. go figure. • nav – navigation. a section with navigation links. special case of section. e.g. table of contents, links to major pages that should appear in all the pages, etc. • aside – content related to and part of main content. special case of section. could contain q quote. e.g. highlight of an article. • h1, h2, …, h6 – headings, subheadings, etc. e.g. 

How to:

Programming without using hands

You never thought it is possible! Did you?

• hgroup -- heading of a section. used for grouping h1, h2, .... e.g. previous example could be contained with this tag.
• header -- group of introductory or navigation aids. could contain hgroup.
• footer -- represents footer. not necessarily that has to appear in the end. because it is presentation concern. e.g. author, copyright, etc. of an article.
• address -- not meant for postal addresses unless it is related to contact info of the current page or article. could be part of footer.

Content Flow • figure – contains a unit where the main content can flow around. similar to magazine content where the text can flow around an image, side bar, did you know?, etc. • figcaption – provides a caption for the figure. • div – avoid using it whatever it means. this is probably the mostly used tag though. :) Grouping • ul – unordered list • li – list item. need not have closing tag. e.g. 

• india
• srilanka

• ol -- ordered list
• dl -- definition list. e.g. <dl><dt>gold<dd>a rare metal<dt>silver<dd>not that rare</dl> where dt is defn title; dd is defn description
• pre -- pre-formatted text. useful for formatting code for example. ascii art. etc.
• #### -- separates content. typically horizontal rule. but again it is the meaning that matters in HTML5; not presentation.

Forms • form — form which contains elements that take input • input — . It has many other types such as textbox, radio, submit, reset. • button — alternative to input when it comes to buttons such as submit or reset. It have more possibilities for styling t####ough CSS. • fieldset — Helps to group related items such as radio buttons, checkboxes, etc. • label — a label to go along with the input controls. e.g. Cheese: <input… • Possible client side possibilities and validations: range, pattern, datalist, autofocus, email, url, tel, required Link Relations • rel= — used along with link element. possible to provide different relationships to semantically relate a particular link or a file • rel=stylesheet — points to css file that is to be used for rendering the page. • rel=alternate — useful for rss feed link, pdf version of the page, etc. • rel=prev rel=next rel=start rel=end — relates other pages with the current page. Helpful for navigation between related pages. • rel=shortcut icon — sets favicon. • rel=prefetch — indicates specified resource to be likely necessary and helpful if fetched before hand. • rel=search — references document helpful for searching current page. This should be OpenSearch document. • rel=tag — useful for specifying tags or categories of the page. Rich Media • video — Streaming video. Additional options: controls, poster, preload, autoplay, repeat, etc. • audio — Streaming audio. • canvas — Block element that marks up the area for drawing. Tutorial here • SVG — It is no more just image format that is scalable better! Of course, svg could be used as part of img. Since svg is xml, it can be directly embedded in html. Most interesting thing is different svg elements can raise events and accordingly javascript code can manipulate the svg shapes. Here is a beautiful example. Advanced Features • Local Storage — Caching at the client side. Not merely cookies. Can have a whole web app cached locally. • Canvas Text API — Provides a way to draw text. Though Canvas is generally supported by modern browsers, text API support is not widespread yet. • Web Workers — T####eaded execution for scripts. Not yet widespread support. • Offline Web Application — Can work with web app even if offline. When we go online, data will be in sync. Very important for mobile apps. • Microdata — Standards for additional semantic info. E.g. Contact details if specified in standardized microdata format, it can be converted to vCard. • History API — Allows to read and manipulate browsing history. For example, going back/forward need not refresh the whole page since the page can decide what to refresh from the previous page. • WebM — Open video format designed for HTML5. WebM is supported by Mozilla, Opera, Adobe, Google and more than seventy other publishers and software and hardware vendors. Also checkout WebP which seems to be similar thing for photos. • Geolocation API — Provides a way to work with client’s current location. CSS3 • CSS selectors — Ways to identify the portion of html to set the styles to. It could be based on id, class, span, div, etc. • Precedence — The styles will be applied on a particular precedence. User’s browser preferences take the top priority. Then the parent element’s style, and so on. • Possibilities — font size, typeface, underline, overline, striket####ough, color, etc. • Even bullet styles can change. Within the bullet points first can be different, or the last can be different, or the nth item can be different. text • text-shadow — provides shadow effect • text-transform — uppercase, camel case, etc. font • font-size — don’t use pt or px since they cannot be standardized. Reference this article for best practice. • font possibilities — simply everything. font-weight, line-height, letter-spacing, word-spacing, font-variant, font-style, alignments, indent, white-space, text-decoration color & background • ways to specify colors – named colors, hex, rgb, hsl, rgba, hsla • background — color, image, pattern / tiling, positioning, attachment (scroll/fixed). Allows shorthand for mixing different options. list • list-style-type — none for horizontal menu. numbered, roman, circle, etc. • list-style-image — image in place of bullets • list-style-position — level of indentation table • border, border-spacing • caption-side • There are just too many ways to slice and dice tables. Sky is the limit! • border styles, background color for specific row/column/cell, etc. box • As opposed to inline elements such as i, em, etc., special styling can be done for block style or box elements such as div. • Background colour, margin, alignment, border, outline, stacking, overflow are some of the possibilities. • cursor allows to set a cursor style when a particular element is hovered over. • border-radius provides fillets for box. Specific fillet is also possible such as border-bottom-right-border How To • How to get rid of the underline in links? text-decoration: none

Links

https://developer.mozilla.org/en-US/

CSS

CSS - https://www.w3.org/Style/CSS/Overview.en.html

(Cascading Style sheets)

HTML

HTML - https://www.w3.org/html/

https://www.w3schools.com/html/default.asp

(Hyper text Markup language)

HTML elements are the building blocks of HTML pages HTML elements are represented by tags HTML is the Web’s core language for creating content for everyone to use anywhere.

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags). The <!DOCTYPE> declaration is not case sensitive.

Elementos HTML

Headings - H1, H2,H3,H4,H5,H6 Paragraphs Links Images Buttons Lists - ol, ul

Binary

Programming Tools

Abstract - www.abstract.com

FIGMA - figma.com

Webflow

Graphql - https://graphql.org/

React - https://reactjs.org/

Docker - https://www.docker.com/

Node.js - https://nodejs.org/

Visual studio - https://code.visualstudio.com/

Postgresql - https://www.postgresql.org/

Mysql - https://www.mysql.com/

Jquery - https://jquery.com/

NPM - https://www.npmjs.com/

MongoDB - https://www.mongodb.com/

Nginx - https://nginx.org/

Glossary

• API - Application Program Interface
• Back end/server-side - the data access layer
• CMS - Content Management System
• CRUD - Create, Read, Update, Delete
• CSS - Cascading Style Sheets
• DNS - Domain Name Service
• DOM - Document Object Model
• ES(6) - ECMAScript
• (S)FTP - (Secure) File Transfer Protocol
• Front end/client-side - the presentation layer
• HTML - Hypertext Markup Language
• HTTP(S) - HyperText Transfer Protocol (Secure)
• JSON - JavaScript Object Notation
• MVC - Model View Controller
• REST - Representational State Transfer
• SPA - Single Page Application
• SQL - Structured Query Language
• SSG - Static Site Generator
• SSH - Secure Shell
• SSL - Secure Sockets Layer
• TLS - Transport Layer Security
• VCS - Version Control Systems (Git)
• VM - Virtual Machine

PYTHON

Python - https://www.python.org/

Variables II

In this video you saw that the following two are equivalent in terms of assignment: x = 3 y = 4 z = 5 and x, y, z = 3, 4, 5 However, the above isn’t a great way to assign variables in most cases, because our variable names should be descriptive of the values they hold. Besides writing variable names that are descriptive, there are a few things to watch out for when naming variables in Python.

1. Only use ordinary letters, numbers and underscores in your variable names. They can’t have spaces, and need to start with a letter or underscore.
2. You can’t use reserved words or built-in identifiers that have important purposes in Python, which you’ll learn about t####oughout this course. A list of python reserved words is described here. Creating names that are descriptive of the values often will help you avoid using any of these words. A quick table of these words is also available below. (image/png)3. The pythonic way to name variables is to use all lowercase letters and underscores to separate words. YES my_height = 58 my_lat = 40 my_long = 105 NO my height = 58 MYLONG = 40 MyLat = 105 Though the last two of these would work in python, they are not pythonic ways to name variables. The way we name variables is called snake case, because we tend to connect the words with underscores.

JAVASCRIPT

Javascript - https://www.javascript.com/

PHP

PHP - https://secure.php.net/

Markdown

RUBY

Ruby - https://www.ruby-lang.org/en/

RUBY ON RAILS

Ruby on Rails, or simply Rails, is a server-side web application framework written in Ruby under the MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pages. It encourages and facilitates the use of web standards such as JSON or XML for data transfer, and HTML, CSS and JavaScript for display and user interfacing. https://en.wikipedia.org/wiki/Ruby_on_Rails http://rubyonrails.org/

---

---