Bogotá LadiesJS

Taller Introductorio al Desarrollo Web

Sobre Bogotá JS -ladiesJS

La comunidad de BogotaJS fue fundada en Noviembre de 2011 y hoy cuenta con más de 2500 desarrolladores inscritos.

En 2015 adoptamos como parte de nuestra misión incentivar la inclusión de género en programación y desarrollo de software.

Gracias al liderazgo de Nathaly, María y Milena hemos dado inicio a Ladies.JS, un grupo enfocado en la tarea de generar un ambiente de equidad, e incrementar la participación activa de mujeres en nuestra comunidad

https://www.facebook.com/groups/bogotajs/permalink/1250441195042767/

fotos de lo que hacemos meetups workshops

Mentores

DESARROLLO WEB

Ayudar a tu compañer@ es ayudarte a ti mism@

1. Descargar el repositorio

https://github.com/coljs/taller-intro-ladies-js

2. Personaliza tu tarjeta!

<html>
 <head> 
  <title>BIENVENIDOS A BOGOTAJS - LADIESJS</title>
 </head>
 <body>
   Que quieres mostrar?
 </body>
</html>

HyperText Markup Language (lenguaje de marcas de hipertexto)

3. A darle animación a tu tarjeta

Hojas de Estilo en Cascada (Cascading Style Sheets)

<html>
 <head> 
  <title>BIENVENIDOS A BOGOTAJS - LADIESJS</title>
  <link rel="stylesheet" type="text/css" href="css/main.css">
 </head>
 <body>
   <h1 class="name">Grace Murray Hopper</h1>
 </body>
</html>

Selectores css

Se utiliza para seleccionar todos los elementos de la página.

*{
 // tus estilos globales
}

p {

}

.class {

}

div p {

}

Javascript

<script type="text/javascript" src="js/main.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/
ajax/libs/animate.css/3.5.2/animate.min.css"></script>

Eventos en Javascript

$('#biography-btn').on('click', function () {
  $('#biography-cont').toggleClass('hidden')
})

$('#contact-btn').on('click', function () {
  $('#contact-form').toggleClass('hidden')
})

Son cosas que sucenden con los elementos HTML, cada elemento o define su propia lista de posibles eventos que se le pueden asignar.

http://hugozap.com/guia-principiantes-js/

http://librosweb.es/libro/javascript/capitulo_6/modelo_basico_de_eventos_2.html

Es posible lograr aplicaciones web capaces de actualizarse continuamente sin tener que volver a cargar la página completa. Esto crea aplicaciones más rápidas y con mejor respuesta a las acciones del usuario.

Contáctame

$form.on('submit', function (e) 
{  e.preventDefault()
  $.post($form.attr('action'), {
      email: $('#email').val(),
      text: $('#text').val()
    })
    .then(function (res) {
      alert(res.message)
    }, function (err) {
      console.error(err)
      alert('Error sending the form.')
    })
})