Your SlideShare is downloading. ×
0
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Html Limpio Y Semantico En Drupal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html Limpio Y Semantico En Drupal

1,583

Published on

Presentación del 24 de julio en el DrupalCamp Perú.

Presentación del 24 de julio en el DrupalCamp Perú.

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
1,583
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. por Jorge Salinas HTML limpio y semántico en Drupal
  • 2. HTML en Wordpress
  • 3.  
  • 4. Wordpress NO es un CMS
  • 5. HTML en Drupal
  • 6.  
  • 7. Views
  • 8. Título Este es el campo resumen  sigue leyendo aquí
  • 9. <h2>    <a href=&quot;/drupal/content&quot;> título </a> </h2> <a href=&quot;drupal/content&quot;> <img src=&quot;/image.jpg&quot; width=&quot;105&quot; height=&quot;105&quot; title=&quot;&quot; alt=&quot;&quot;/> </a> <p> Este es el campo resumen </p> <a href=&quot;/drupal/content&quot;> sigue leyendo aquí </a> Título Este es el campo resumen sigue leyendo aquí
  • 10. <h2>    <a href=&quot;/drupal/content&quot;> título </a> </h2> <a href=&quot;drupal/content&quot;> <img src=&quot;/image.jpg&quot; width=&quot;105&quot; height=&quot;105&quot; title=&quot;&quot; alt=&quot;&quot;/> </a> <p> Este es el campo resumen </p> <a href=&quot;/drupal/content&quot;> sigue leyendo aquí </a> VS
  • 11. Bloques Menus
  • 12. ¿Que problemas trae esto?
      • CSS difícil de mantener 
      • Mucha dificultad para validar el HTML
      • Menor control sobre el HTML y CSS
      • Más código
      • Mayor tamaño del documento
  • 13. Un caso concreto.
  • 14. ¿Que nos propusimos?
      • Preparar el HTML y CSS sin pensar en Drupal
      • Control total sobre el HTML y el CSS
      • Validación W3C HTML Strict
      • Clases e ids semánticos
      • Reutilizar mucho código ( CSS ) 
  • 15. tpl.php files Mothership theme hook_theme  functions Semantic views module Herramientas
  • 16. Archivos tpl.php Son templates (plantillas) que nos permiten modificar las salidas HTML de determinados módulos.
  • 17. <div id=&quot; block- <?php print $block->module . '-' . $block->delta; ?> &quot; class=&quot; <?php print $classes; ?> &quot;><div class=&quot; block-inner &quot;>     <?php if ($block->subject): ?>      <h2 class=&quot;title&quot;> <?php print $block->subject; ?> </h2>    <?php endif; ?>    <div class=&quot;content&quot;>      <?php print $block->content; ?>    </div>    <?php print $edit_links; ?> </div></div> <!-- /block-inner, /block --> block.tpl.php
  • 18. <div class=&quot; block &quot;>     <?php if ($block->subject): ?>      <h2> <?php print $block->subject; ?> </h2>    <?php endif; ?>      <?php print $block->content; ?> </div> <!-- /block --> <div id=&quot; block- <?php print $block->module . '-' . $block->delta; ?> &quot; class=&quot; <?php print $classes; ?> &quot;><div class=&quot; block-inner &quot;>     <?php if ($block->subject): ?>      <h2 class=&quot;title&quot;> <?php print $block->subject; ?> </h2>    <?php endif; ?>    <div class=&quot;content&quot;>      <?php print $block->content; ?>    </div>    <?php print $edit_links; ?> </div></div> <!-- /block-inner, /block --> block.tpl.php block.tpl.php
  • 19. Es un tema gráfico que limpia las clases y ids que Drupal trae por defecto.  Se utiliza como un tema base . drupal.org/project/mothership
  • 20.  
  • 21. Algunas clases son necesarias para que ciertos módulos funcionen correctamente; por ejemplo, el módulo views necesita la clase view-dom-id para que la opción 'Ajax' funcione correctamente.
  • 22. Semantic Views Es un módulo  contribuido que nos da una interfaz gráfica desde donde podremos cambiar, la salida HTML de nuestras vistas(views).  drupal.org/project/semanticviews
  • 23.  
  • 24.  
  • 25. hook_theme functions Algunos módulos implementan la función hook_theme que especifica que archivos y funciones se pueden usar para sobreescribir la salida HTML  http://api.drupal.org/api/function/hook_theme
  • 26. Usando theme_link para limpiar los menus
  • 27. Usando theme_link para limpiar los menus
  • 28.  
  • 29.  
  • 30.  
  • 31.  
  • 32. Jorge Salinas @ SOFTWIN [email_address]

×