Nov 21

Acelerando la codificación de HTML/CSS

CSS, Dreamweaver Ningun comentario »

Zen Coding es una herramienta creada por Sergey Chikuyonok, que nos permite acelerar al codificación de HTML/CSS al usar abreviaturas de código basadas en selectores CSS.

Por ejemplo:

div#content>ul.navigation>li>a

Nos genererá:

<div id="content">
<ul>
<li><a href=""></a></li>
</ul>
</div>

Ademas tiene otras interesantes funciones como la repetición por ejemplo:

ul>li*3

Nos generará:

<ul>
<li></li>
<li></li>
<li></li>
</ul>

Soporta snippets lo cual nos permite configurar nuestros própios códigos.

Feb 29

Plantillas con Dreamweaver

Dreamweaver 1 Comentario »

Antes de crear una plantilla debemos entender los siguientes conceptos:

  • Región editable: Determina una región no bloqueada de un documento que use la plantilla, es decir, una sección que el usuario de la plantilla puede editar.
  • Región opcional Una sección de la plantilla en la que hay contenido (como texto o una imagen) que puede aparecer o no en un documento. En la página que usa la plantilla, el usuario de la plantilla suele controlar si el contenido se mostrará.
  • Región repetida Es una sección del diseño del documento que se establece de forma que el usuario de la plantilla pueda añadir o eliminar copias de la región en un documento basado en la plantilla según resulte oportuno. Por ejemplo, puede definir que una fila de una tabla se repita. Las secciones repetidas son editables para que el usuario de la plantilla pueda editar el contenido del elemento repetido, mientras que el diseño propiamente dicho está controlado por el autor de la plantilla.
  • Atributo de etiqueta editable Permite desbloquear un atributo de etiqueta de una plantilla de modo que el atributo pueda editarse en una página que usa la plantilla. Por ejemplo, puede “bloquear” qué imagen aparece en el documento, pero dejar que el usuario de la plantilla establezca alineación izquierda, derecha o central.

Ahora que tenemos claro los conceptos básicos de las plantillas vamos a crear una:

  1. Abramos Dreamweaver y creemos un nuevo documento html.

    2. Coloquemos para el ejemplo 3 secciones en nuestra página: header, contenido, footer, quedando así:

    <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>Plantillas con DreamWeaver</title>
  </head>
  <body>
  <div id="header">Header</div>
  <div id="cotenido">Contenido</div>
  <div id="footer">Footer</div>
  </body>
</html>
  2. Lo guardamos como plantilla. Desde el menú Archivo > Guardar como plantilla

    guardar-como.jpg

    3. Colocamos el nombre de la plantilla, para el ejemplo ponemos master

    nombre.jpg

  3. Actualizamos los vinculos, esto es importante pues permite a las páginas que usen la plantilla modificar las rutas de los archivos que use.

    actualizar-vinculos.jpg

  4. Dado que en nuestra página de ejemplo solo la sección “contenido” cambiará en las diferentes páginas de nuestros site, mientras que el “footer” y hel “header” será el mismo, definiremos esta seccion como una región editable, para ello seleccionamos el menu Insertar > Objeto de plantilla > Región editable

    Región editable

  5. Ahora colocaremos un nombre a la región editable, coloquemos “Contenido”

    Nombre region

  6. Veamos el código que se genero 
    <!-- TemplateBeginEditable name="Contenido" -->
<div id="cotenido">Contenido</div>
<!-- TemplateEndEditable -->

    Las etiquetas <!– TemplateBeginEditable name="Contenido" –> <!– TemplateEndEditable –> encierran le región editable de la plantilla

  7. Guardamos la plantilla y listo, ahora cada vez que creemos una nueva página de nuestro sitio debemos usar la plantilla. Para usar la plantilla debemos seleccionar el menu Ventana > Activos (O la tecla F11) y presionamos el botón plantilla

    Seleccionar plantilla

  8. Enla plantilla y con click derecho seleccionamos “Nuevo de plantilla”

    Usar plantilla

  9. Se abrirá un nuevo documento, notemos que solo la seccion “Contenido” podremos cambiarla las demas aparecreán bloqueadas

De esta manera podemos crear un sinnúmero de páginas y si deseamos cambiar por ejemplo la seccion “header”, solo tendremos que cambiar en la plantilla, DreamWeaver automáticamente actulizara los cambios en todas las páginas que usen la plantilla

En próximos post publicaré ejemplos y explicare otros aspectos de las plantillas en DreamWaver

Oct 21

Videos tutoriales de productos Adobe CS3 en español

Dreamweaver, Fireworks, Flash, PhotoShop 2 Comentario »

En video workshop de Adobe podemos encontrar interesantes videos tutoriales onLine de productos como:

  • Flash CS3
  • DreamWeaver CS3
  • Photoshop CS3
  • Entre otros..

Todos los videos se encuentran en español. Una buena opción para autoeducarnos.!

Switch to our mobile site