Ajax Fácil con CakePHP

Transcripción

1 Ajax Fácil con CakePHP

2 El ideal del desarrollo web Separación Contenido Presentación Comportamiento (Behaviour)

3 Contenido: (X)HTML (extensible) HyperText Markup Language

4 Estándares Web

5 Estándares Web 3 Reglas de oro

6 1.- Correcta anidación <ul ul> <li li> </li> </ul>

7 2.- Cerrar etiquetas independientes <br br/> <img src= alt= />

8 3.- Evitar etiquetas deprecadas <center center> </center> <font> <blink>

9 Y así obtenemos código válido

10 Presentación: CSS Cascading Style Sheets

11 Ventajas de CSS Es menos redundante Es más rápido Es más fácil de mantener

12 Partes de CSS: Regla: p,ul{ color: #fff; margin: 10px; border: 1px solid #333; }

13 Partes de CSS: selectores: p,ul{ color: #fff; margin: 10px; border: 1px solid #333; }

14 Partes de CSS: Bloque de declaración: p,ul{ color: #fff; margin: 10px; border: 1px solid #333; }

15 Partes de CSS: Propiedades: p,ul{ color: #fff; margin: 10px; border: 1px solid #333; }

16 Partes de CSS: Valores: p,ul{ color: #fff; margin: 10px; border: 1px solid #333; }

17 Llamar al CSS desde XHTML <link rel="stylesheet "stylesheet" type="text "text/css css" href="styles.css "styles.css" media="screen "screen" />

18 Identificadores xhtml css <div id= container" container"> </div> #container{ width: 760px; background: #eee; }

19 Clases xhtml css <div class= post" post"> </div> <div class= last post"> </div>.post{ padding: 15px; border: 1px solid #eee; }.last last{ background: #ffe; }

20 Rutas de selectores xhtml css <div id = container > <div class= post > <h2>yeah! Yeah!</h2> </div> </div> #container.post h2{ color: #e00; }

21 Antes de continuar Una pausa comercial

22 Nuestra mejor herramienta

23 Firefox browser Cumple con los estándares Cientos de extensiones Tiene el mejor logotipo

24 Ahora si, continuamos

25 Comportamiento: Javascript

26 Javascript: Lenguaje interpretado Sintaxis parecida a Java Funciona en el cliente

27 DOM Document Object Model

28

29 DOMScripting: Técnica mediante la que se manipula el DOM usando Javascript

30 Incluir Javascript <script language= javascript type="text/javascript" src= script.js" script.js"> </script>

31 Cómo obtener un nodo por su id document.getelementbyid(id id)

32 Cómo obtener todos los nodos de determinada etiqueta document.getelementsbytagname(id id)

33 AJAX Asynchronous Javascript And XML (Javascript y XML asíncronos)

34 asíncrono, na. (De a-2, sin- y el gr. χρόνος, tiempo). 1. adj. Se dice del proceso o del efecto que no ocurre en completa correspondencia temporal con otro proceso u otra causa.

35 NO REFRESHING

36 Ejemplos Google suggest Netvibes Instant Domain Search

37 El objeto XMLHttpRequest A ver, diganlo rápido

38 El problema XMLHttpRequest En IE es un objeto ActiveX En todos los demás es un objeto nativo de Javascript

39 Debería ser tan fácil como var xmlhttp = new XMLHttpRequest()

40 var >= 5) // JScript gives us Conditional compilation, we can cope with old IE versions. // and security blocked creation of the objects. try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; if (!xmlhttp && typeof XMLHttpRequest!='undefined') { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp=false; } } if (!xmlhttp && window.createrequest) { try { xmlhttp = window.createrequest(); } catch (e) { xmlhttp=false; } }

41 Al rescate: prototype prototype.conio.net

42 Ajax.Updater new Ajax.Updater(container,url container,url[, [,options options])

43 opciones asynchronous method parameters postbody

44 callbacks onloading oncomplete onsucces onfailure

45 Ajax.Request new Ajax.Updater(url url[, [,options options])

46 La función dólar $(elemento elemento)

47 ejemplo $( contenedor contenedor )

48 La función doble dólar $$(selector selector)

49 ejemplo 1 $$( #contenedor #contenedor ) No tan útil

50 ejemplo 2 $$( #tabs ul li a ) Eso si es útil

51 Iterador: Array.each() Array.each(function(current) function(current))

52 El factor wow: script.aculo.us

53 script.aculo.us Efectos visuales Drag&Drop Controles

54 Efectos visuales Básicos: Effect.Opacity() Effect.Scale() Effect.MoveBy() Effect.Highlight() Effect.Parallel() Etc

55 De combinación: Efectos visuales Effect.Appear() Effect.Fade() Effect.Highlight() Effect.SlideUp () / Effect.SlideDown() Effect.BlindUp() / Effect.BlindDown() Effect.Grow() Etc

56 Efectos visuales Sintaxis: new Effect.Highlight(element[,options]);

57 Efectos visuales Ejemplo: new Effect.Highlight( element ); new Effect.Highlight( $( element ), {duration:2} );

58 Element.VisualEffect() Sintaxis: Element.VisualEffect(effectType[,options]); Ejemplo: $( container ).VisualEffect( HighLight );

59 CakePHP Entorno de desarrollo rápido para aplicaciones web

60 Filosofía Modelo-Vista-Controlador No te repitas Convención sobre configuración

61 App/config/database.php El único archivo de configuración necesario

62 Modelo Representa una tabla de la base de datos. Debe nombrarse en singular.

63 Controlador Contiene la lógica de la aplicación Debe nombrarse en plural.

64 var $scaffold; Magia

65 Layout La plantilla maestra Por defecto, CakePHP busca default.thtml

66 Vista Las plantilla de cake Por defecto, se llaman como el la acción que las llama Llevan extensión.thtml