Slides from a presentation that David Lopez (@lopezator) and me made for the students of the University of the Basque Country (UPV/EHU) where we talk about current technologies and methodologies used in professional web development. CSS3, jQuery, Composer, MVC, Clean Code, Git, etc. are different items we talked about. Some examples shown in the presentation available at: http://ojoven.es/labs/ehu2014/

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 &