Thor 1 de abril de 2008 a las 15.03
   Imprimir artículo
elWebmaster.com

Taller de Adobe Dreamweaver: Trabajo en modo c贸digo


Taller de Adobe Dreamweaver: Trabajo en modo c贸digoHola, mis fieles seguidores (隆y a los nuevos tambi茅n!) 驴C贸mo les va? Espero que bien, por supuesto. Hoy nos toca revisar la vista de c贸digo. No se asusten al escuchar (o leer, en este caso) esta palabra.

Primero porque hoy s贸lo veremos el 谩rea de trabajo y las opciones de manejo del c贸digo y no el c贸digo en s铆, y segundo porque una vez que empecemos a usarlo, ver谩n que no es tan complicado como pensaban.

Calculo que todos tendr谩n su sitio definido con su index.html en blanco (que 驴recuerdan que no era tan blanco?) 驴驴No lo tienen?? 隆隆A leer clases anteriores!
驴驴Lo tienen??? 隆隆隆Esos son mis alumnos!!! ^_^

Bien, vamos a dejar una imagen de la vista de c贸digo como referencia durante la clase:

Taller de Adobe Dreamweaver: Trabajo en modo c贸digo

En la vista de c贸digo, la parte superior de la ventana es igual a la de la vista de dise帽o, salvo que no tenemos las 鈥渧isual aids鈥 (el ojito) que son ayudas visuales especificas del modo de vista de dise帽o.

En el 谩rea de trabajo lo primero que podemos ver es que desaparecen las reglas y aparece un numerado de l铆neas en su lugar, de gran ayuda a la hora de posicionarse en el c贸digo en documentos muy extensos.
Otras cosas que desaparecen, obviamente, son la 鈥渕anito鈥, la herramienta de selecci贸n (la flecha negra) y el zoom.

Lo nuevo es el panel de la izquierda con opciones espec铆ficas para el manejo de c贸digo.

Vamos a seccionarlo por partes e ir explicando sus principales usos:

Taller de Adobe Dreamweaver: Trabajo en modo c贸digo Open documents:
Nos despliega un men煤 con una lista completa de los archivos abiertos con su ruta completa.

Taller de Adobe Dreamweaver: Trabajo en modo c贸digoTaller de Adobe Dreamweaver: Trabajo en modo c贸digoTaller de Adobe Dreamweaver: Trabajo en modo c贸digo Collapse Tag, Collapse Selection, Expand All:
Estas tres herramientas nos sirven para poder acomodar el c贸digo de nuestra p谩gina as铆 no nos molesta a medida que avanzamos en nuestro proyecto.

Cuando estamos parados en un tag o tenemos una selecci贸n y presionamos el bot贸n correspondiente, Dw lo que har谩 es minimizar esa secci贸n de c贸digo en una sola l铆nea y nos avisara que tiene mas en su interior colocando 鈥溾︹, tres puntos al final.
Adem谩s nos agregara el signo 鈥+鈥 en el lado izquierdo para poder expandir esa secci贸n.
El bot贸n 鈥淓xpand all鈥, expandir谩 TODAS las partes que tengamos 鈥渃olapsadas鈥.

Taller de Adobe Dreamweaver: Trabajo en modo c贸digo
C贸digo normal

Taller de Adobe Dreamweaver: Trabajo en modo c贸digo
C贸digo minimizado

Taller de Adobe Dreamweaver: Trabajo en modo c贸digoTaller de Adobe Dreamweaver: Trabajo en modo c贸digo Select parent tag, Balance braces:
El primero marcar谩 una selecci贸n completa del tag padre en el que estemos posicionados con el cursor (desde la etiqueta de apertura hasta la de cierre), y a medida que lo vayamos apretando una y otra vez, ir谩 seleccionando cada padre correspondiente a la actual selecci贸n.

Por si no saben a que me refiero con padre, la frase 鈥淯ntitled Document鈥 es hija del tag <title></title> y el tag <title></title> es hijo del tag <head></head>. *(foto de c贸digo normal)

Balance braces sirve para, cuando programamos en un lenguaje que usa llaves 鈥渰}鈥 (javascript, php鈥), si estamos parados entre 2, presionamos el bot贸n y selecciona todo el contenido de las mismos.
Es muy 煤til a la hora de buscar el comienzo o fin de un bloque, pero en fin, no nos servir谩 para HTML.

Taller de Adobe Dreamweaver: Trabajo en modo c贸digoTaller de Adobe Dreamweaver: Trabajo en modo c贸digo Line numbers, Highlight invalid code:
El primero esconde la barra de numeraci贸n de l铆neas que est谩 a la izquierda.
El segundo, nos marca el c贸digo err贸neo resalt谩ndolo en amarillo.

Taller de Adobe Dreamweaver: Trabajo en modo c贸digoTaller de Adobe Dreamweaver: Trabajo en modo c贸digo Apply comment, remove comment:
Sirven para agregar un comentario nuevo (o comentar una secci贸n seleccionada), y a la inversa, para remover un comentario, o remover los comentarios de un 谩rea seleccionada.

Taller de Adobe Dreamweaver: Trabajo en modo c贸digoTaller de Adobe Dreamweaver: Trabajo en modo c贸digoTaller de Adobe Dreamweaver: Trabajo en modo c贸digo Wrap tag, Recent snippet, Move or convert CSS:
Wrap tag encierra una parte de nuestro HTML que tengamos seleccionada dentro de un tag que podremos elegir cuando presionemos el bot贸n.

Por ejemplo escribimos un texto, lo seleccionamos, apretamos el bot贸n, elegimos el tag de p谩rrafo (<p></p>) y encerrar谩 todo el texto dentro de esos dos tags (apertura y cierre) transform谩ndolo en un p谩rrafo.

Recent snippet nos despliega una lista de los 鈥渟nippets鈥 que hayamos usado recientemente, o nos muestra el panel de snippets de Dreamweaver.
Los snippets son c贸digos predefinidos de diferentes cosas y en diferentes lenguajes.

A modo de ejemplo, podemos insertar desde el panel de snippets un snippet javascript que deshabilite el bot贸n derecho en nuestra p谩gina, u otro snippet que agregue un formulario predefinido, y muchos elementos HTML mas que nos pueden servir para ahorrar tiempo a la hora de escribir.

Si algo no entienden sobre esto no duden en poner comentarios al respecto que me extiendo sobre el tema. No lo hago ahora mismo porque no es el punto de la clase y debemos explicar todos los elementos de la barra por igual.

El tercer bot贸n, Move or convert CSS, sirve para convertir un estilo que le pongamos a un tag (ya veremos en futuras clases que es un estilo) en una clase o id de CSS (ya lo veremos, se los cuento por si quieren investigar), o pasar c贸digo CSS de un archivo a otro.

Taller de Adobe Dreamweaver: Trabajo en modo c贸digoTaller de Adobe Dreamweaver: Trabajo en modo c贸digoTaller de Adobe Dreamweaver: Trabajo en modo c贸digo Ident code, Outdent code, Format source code:
Estos tres botones son realmente 煤tiles a la hora de trabajar con grandes proyectos en los que necesitamos tener el c贸digo ordenado.

Ident realiza una tabulaci贸n hacia la derecha de la l铆nea o la selecci贸n que tengamos.

Outdent, lo contrario, remueve una tabulaci贸n.

Y por ultimo, Format source code, preformatea el c贸digo a la manera predefinida de Dw, aunque se pueden modificar varias opciones de esta herramienta.

Les dejo una imagen de muestra para que sepan lo que es un c贸digo identado.

Taller de Adobe Dreamweaver: Trabajo en modo c贸digo

Como pueden ver, cada elemento que se encuentra dentro de otro, esta tabulado una vez m谩s que su 鈥減adre鈥 (tag que lo contiene).

En trabajos con c贸digo muy largo, el tenerlo bien identado es una ayuda MUY GRANDE.

Es bueno que se acostumbren a identar el c贸digo ustedes mismos, sin la ayuda de la herramienta de Dw, pero bueno, si se 鈥渙lvidan鈥, esta herramienta es de GRAN ayuda.

Conclusi贸n

Bueno, ac谩 terminamos de ver el 谩rea de trabajo del modo c贸digo. Mas adelante cuando empecemos a agregar elementos a nuestra pagina iremos viendo las diferencias entre lo que agregamos en modo visual, y lo que sale en modo c贸digo y viceversa.

A su vez iremos utilizando estas herramientas, as铆 que es importante que las vayan aprendiendo y si no las quieren usar en un futuro, porque se acostumbran a trabajar a su manera (cada uno hace las cosas diferentes jeje) pues, no les molestar谩 en nada saber algo m谩s.

隆El conocimiento no ocupa lugar!

隆Saludos!

<< CLASE ANTERIOR  

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (6)

  1. Alex Sparrow dice:

    Hola a todos!

    en mi experiencia usar la vista de codigo me parecio m谩s comodo que la de dise帽o o la intermedia split. Usar el codigo me parecio m谩s noble o no se como decirlo. M谩s seguro.

    En este momento estoy reparando el sitio ya que algunos links me fallaron o los direccione mal. Usar el CSS mu hibiera ahorrado muchos inconvenientes, pero aun no lose usar, asi que seguire el curso.

    Ciao

  2. Ramiro Villarroel dice:

    Saludos…… una consultita …. puedo yo aumentar snippets definidos por mi mismo para mi proyecto.. como y donde lo hago??????

  3. joel dice:

    Hola a todos, apenas he iniciado a ver php,me encantaria saber usarlo,soy analista de generaciones pasadas pero intento estar actualizado,desarrollador en cobol rm y visual
    gracias por su importante cesion de software

    guadalajara, jalisco, mexico

  4. Ledyz Mur dice:

    Hola, primero que todo quiero dar las gracias por estos tutoriales son excelentes. Tengo un problema con mi dreamweaver, estoy hasta ahora familiarizandome con el espacio de trabajo y no me salen las opciones para el manejos del c贸digo, c贸mo hago? Se que es algo que muy b谩sico, pero quiero aprender a configurar bien el espacio de trabajo, porfa me puedes ayudar con eso?

    Muchas gracias y cordial saludo!.

  5. Alejandra dice:

    No llego a entender la consulta…

  6. carlos dice:

    hola amix me gustari saber como ago para inseratar nombre,apellidos.email y para enviar comentaRIOAS EN DREAM.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder