Bienvenidos

Juan Ignacio Cuiule

@juancuiule

juan.cuiule@bue.edu.ar

Soy desarrollador web, estudiante de Ingenieria en Sistemas y mentor en Programá tu Futuro.

¿Por qué estoy acá?

¿Por qué están acá?

¿Qué es Programá tu Futuro?

Iniciativa del Ministerio de Educación de la Ciudad.

Buscamos acercar la programación a la comunidad y promover el acceso democrático a la educación tecnológica.

Club

Hackaton - Interclub

Sedes

Presentación de a dos

Pero...
¿Qué es programar?

¿Qué es un algoritmo?

¿Dónde encontramos algoritmos en el día a día?

Es un conjunto prescrito de instrucciones o reglas bien definidas, ordenadas y finitas que permite llevar a cabo una actividad mediante pasos sucesivos que no generen dudas a quien deba hacer dicha actividad

Cocinando Algoritmos

Actividad 1

En grupo escribimos nuestros propios algoritmos basados en tareas del día a día

Rápida Intro a...

HTML

(HyperText Markup Language)

  • Es el "esqueleto" de nuestra
    página o aplicación
  • Describe una estructura
  • Usa etiquetas (tags)
<h1>Esto es html</h1>
<p>h1, p e img son etiquetas</p>
<p>src y alt son atributos y nos permiten
 agregarle información a las etiquetas</p>
<img src="foto.jpg" alt="montaña"/>

<body>
  <h1>Hola Mundo</h1>
  <p>Estoy aprendiendo html</p>
  <img width="500px"
    src="https://bit.ly/foto-campus"/>
</body>

Manos a la obra

https://bit.ly/práctica-html

CSS

(Cascading Style Sheets)

  • Es el "estilo" de nuestra
    página o aplicación.
  • Describe posicionamiento, diseño, colores, efectos, etc.
  • Usa selectores.
  • Introduce ids (identificadores) y clases.
  • Propiedades y valores.
h1 {
  propiedad: valor;
  color: red;
  font-size: 20px;
}
.rojo {
  color: red;
}

#verde {
  color: green;
}
body {
    text-align: center;
}

h1 {
    color: red;
}

.parrafo {
    font-size: 20px;
    font-family: Arial;
}

#imagen {
    border-radius: 30px;
    width: 500px;
}

Manos a la obra

Otra vez!

https://bit.ly/práctica-css

JS

(Javascript - ECMAScript)

  • Es la funcionalidad y la lógica de nuestra app.
  • Describe comportamiento, interacción, cambios.
  • Algoritmos
  • Variables
  • Tipos de datos
  • Funciones
  • Operaciones
var miNombre = "Juan"
alert("Hola mi nombre es " + miNombre)

var miEdad = 19
console.log("Tengo " + miEdad + " Años")

document
  .getElementById("id")
  .addEventListener("click", function() {
    console.log("Ouch!")
})

Variables

Una variable es un espacio (caja) de la memoria que utilizaremos para guardar información

Tipos de Datos

Números

Strings - Cadenas de Texto

Boolean - True/False

Arrays - Listas

Objetos

Funciones

Manos a la obra

Última (?)

https://bit.ly/práctica-js 

¿Y esto cómo se convierte en mi app?

PhoneGap