1. Desarrollo web.
Repaso a tecnologías y metodologías de desarrollo actuales.

2. David López
@lopezator
b1ud13@gmail.com
Mikel Torres
@ojoven
mikeltorresmail@gmail.com

3. WORK
FRONT
END
BACK
END
METHODOLOGY

4. FRONT END

8. Transitions
.box {
width: 150px;
height: 150px;
margin: 20px auto;
background-color: #999;
}
#box1 {
transition: background-color 0.5s ease;
background-color: red;
}
#box1:hover {
background-color: green;
}

9. Transforms
#box3 {
margin-top: 50px;
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

10. Animations
#box5 {
animation: my-animation 3s;
animation-iteration-count: infinite;
}
@keyframes my-animation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

11. SASS/LESS

12. Variables

13. Mixins

14. Nested Rules

15. Javascript

17. jQuery
<a id="try-zoom" class="btn btn-primary">Zoom!</a>
function initZoom() {
$('#try-zoom').click(function() {
zoom.to({
element: document.querySelector( '#to-zoom' )
});
});
$('#to-zoom').click(function() {
zoom.out();
});
}

18. AJAX

19. AJAX
function getStudents() {
$(".student").click(function() {
var url = urlBase + "/getstudent";
var studentId = $(this).parent().find('input[class="studentId"]').val();
$.get(url, {
studentId: studentId
}, function(response) {
console.log(response);
});
});
}

20. Responsive

21. Responsive
.container {
width:1024px;
}
@media screen and (max-width:768px){
.container {
width:100%;
}
}

22. Web fonts

23. <link href='http://fonts.googleapis.com/css?family=Jolly+Lodger'
rel='stylesheet' type='text/css'>
font-family: 'Jolly Lodger', cursive;

25. BACK END

26. Composer
“Composer is a tool for dependency management in PHP. It allows you to declare the dependent libraries
your project needs and it will install them in your project for you.”
http://getcomposer.org

27. Apache VirtualHosts
The term Virtual Host refers to the practice of running more than one web site (such as company1.
example.com and company2.example.com) on a single machine.

28. Bases de Datos

29. MySQL

30. Y bien, ¿cómo realizamos una
consulta a MySQL desde PHP5?

31. Fácil, concatenamos la consulta con su condición en un string.
$result = mysql_query("SELECT LUKE FROM PADRES WHERE PADRE =". $darth_vader);

33. Una consulta debe estar siempre parametrizada.
* Por legibilidad
* Por limpieza del código.
* Y lo mas importante, evitar ataques SQL Injection.
$stmt = $pdo->prepare("DELETE FROM SINGERS WHERE NAME = :name AND SURNAME = :surname”);
$stmt->prepare(array(“name” => “Justin”, “surname” => “Bieber”);

34. Para NOTA: USA ORMS
Diferentes opciones:
* Doctrine
* Propel
* RedBean

35. API

36. Examples
Twitter: https://dev.twitter.com/docs/api/1.1
Facebook: https://developers.facebook.com/docs/graph-api/
Google: http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Earth%20Day
Amazon: http://docs.aws.amazon.com/AWSECommerceService/latest/DG/ItemSearch.html

37. Framework

38. MVC: Modelo / Vista / Controlador
http://librosweb.es/jobeet_1_4/capitulo_4/la_arquitectura_mvc.html
http://students.com/students/get?studentId=123
/** Students Controller **/
public function get() {
// Get student id from request
$studentId = $this->request->query['studentId'];
// We call Student Model to retrieve Student
$student = $this->Student->getStudent($studentId);
// Set result to the view
$this->set('student', $student);
}

39. ● Routing
● ACL
● Autentificación
● Acceso a BD
● Validación
● Seguridad
● Session
● Cache
● ...

40. WORK
METHODOLOGY

41. IDE
Diferentes opciones:
* Eclipse
* NetBeans
* PHPStorm
* Vim/Emacs (Apto para agilistas geeksters)
* Dreamweaver

42. Debugging
* Xdebug/Zend Debugger
* Loggers integrados en frameworks
* Firebug/Developer tools
* Logs de servidor (Apache)
* E-Mail (Sí, e-mail)

43. Git
* Trabajar en equipo de forma, rápida, segura y prácticamente
transparente.
* Histórico de commits, posibilidad de rollbacks, recuperación de
codigo antiguo, etc.
* Compares (Otra herramienta de debugging)
*Continuous deployment (No more FTP)

44. Manos a la obra!
git clone https://github.com/lopezator/thumbNailGenerator.git

45. GitHub
* Posibilidad de trabajo colaborativo, ofrece un servidor de
código github, que puede ser público o privado.
* Almacén de código para poder descargarlo desde cualquier
lugar.
* Muy relacionado al mundo del software libre.
* Geekster.

46. Continuous Deployment
* SVN Export
* Git Pull (Hooks)
*Hooks
* Scripts propios (rsync, scp, bash…)

47. CLEAN CODE

48. public function getts() {
$amin = date('Y-m-d H:i:s', time()-60);
$ts = $this->find('all', array(
'conditions' => array(
'created >' => $amin
)
));
return $ts;
}
Example

49. Auto commented code: variable names
public function getTweetsLastMinute() {
$aMinuteAgo = date('Y-m-d H:i:s', time()-60);
$tweetsLastMinute = $this->find('all', array(
'conditions' => array(
'created >' => $aMinuteAgo
)
));
return $tweetsLastMinute;
}

50. public function getCompleteStudent($studentId) {
$student = $this->getStudent($studentId);
$student->images = $this->getImagesStudent($studentId);
$student->courses = $this->getCoursesStudent($studentId);
$student->teachers = $this->getTeachersStudent($studentId);
return $student;
}
Auto commented code: function names

51. TDD

52. TEST
describe("Player", function() {
var player;
var song;
beforeEach(function() {
player = new Player();
song = new Song();
});
it("should be able to play a Song", function() {
player.play(song);
//demonstrates use of custom matcher
expect(player).toBePlaying(song);
});
});

53. Empleo
¿Buscas trabajo y no encuentras?
Inténtalo de nuevo, inténtalo mejor.

54. ● No te limites a Infojobs/echar CVs, adáptate a la situación actual.
● Conexión con la realidad/comunidad local. (LinkedIn, Twitter, eventos (networking),
comunidades locales, github, etc…
● Blogging, investigación.
● Toy projects/diferénciate del resto.
● Especialización en tecnologías en liza, autoaprendizaje, actualización constante.
● Teletrabajo (USA/EUROPA).
● Start-ups.
● Emprendizaje.

55. BONUS:
RECURSOS

56. The Mêlée
http://themelee.org

57. Katayunos
http://katayunos.com

59. https://twitter.com/devsidestory
http://favstar.fm/users/devsidestory

61. https://twitter.com/E1Am1g01nf0rma1
http://favstar.fm/users/E1Am1g01nf0rma1

62. https://twitter.com/devopsreactions
http://devopsreactions.tumblr.com/
Why DOS attacks stop - behind the scenes

63. BONUS:
+1 LIFE

64. ● Formación continua
● Networking
● Emprendizaje
● Marketing
● Toy Projects
● Redes Sociales
● Personal Brand
● Stackoverflow

66. GRACIAS
Mikel Torres
@ojoven
David López
@lopezator &