INSTITUTO DE FORMACIÓN PROFESIONAL RECONOCIDO POR EL MINISTERIO DE EDUCACION Y CULTURA DEL PARAGUAY : RES. Nº 174 DEL /01/06/2000 LOCAL 1: Av. Estados Unidos 805 Esq. Fulgencio R. Moreno Tel. (021) 202-146 ; Cels. (0982) 931-492 ; (0981) 657-095 LOCAL 2: Av. Brasil 663 Entre/. Herrera y Azara Tel. (021) 202-211; Cel. (0981) 335-748
Web: http://www.cepeu.edu.py **** Email: cepeu@cepeu.edu.py
¡ La Mejor Enseñanza Personalizada para las Mejores Carreras Informáticas de Hoy y de Siempre......!
Curso de Expression 3
Microsoft Expression Web es una herramienta profesional completa para diseñar, desarrollar y publicar sitios web atractivos y con múltiples características que cumplen los estándares web. Los diseñadores y programadores de páginas web, así como los profesionales de diseño visual, pueden usar Expression Web para crear y producir sitios web.
Expression Web es compatible con ASP.NET, PHP, Microsoft Silverlight, imágenes de Deep Zoom Composer, AJAX y vídeo de Silverlight. Se pueden importar archivos de Adobe Photoshop fácilmente, así como publicar sitios de una forma rápida y segura con varias secuencias de transferencia de archivos y FTP seguro.
Los diversos modos de vista previa de Expression Web aceleran el desarrollo del sitio. Use la característica de vista previa de instantáneas para ver vistas reales de páginas con el explorador instalado en el equipo, justo en Expression Web. Utilice SuperPreview para comparar las páginas de varios exploradores simultáneamente. Incluso puede superponer páginas de dos exploradores diferentes para solucionar errores de diseño y de posicionamiento. Descarga desde Aquí el Software de Expression Web 3
Microsoft Expression Web es una herramienta profesional completa para diseñar, desarrollar y publicar sitios web atractivos, con múltiples características y compatibles con los estándares web. Ya sea un diseñador web, un programador web o un profesional de diseño visual, Expression Web puede serle útil para publicar los diseños en Web.
Introducción
Para empezar a conocer Expression Web, vea los temas siguientes:
Acerca de Expression Web Aprenda cómo puede usar Expression Web y lo que puede hacer con esta aplicación.
Ajustar el área de trabajo (Haga Click para Abrir la Ficha)
Ajustar el área de trabajo
El área de trabajo de Microsoft Expression Web proporciona las herramientas necesarias para editar páginas y sitios web. El área de trabajo se puede personalizar, es decir, puede cambiar su apariencia para que se adapte a su forma de trabajar.
Sugerencia:
Para restablecer la apariencia predeterminada del área de trabajo, en el menú Paneles, haga clic en Restablecer diseño del área de trabajo.
A continuación se muestra el área de trabajo cuando se instala Expression Web por primera vez:
Los menús y las barras de herramientas le permiten realizar tareas como guardar archivos y sitios, generar informes y cambiar la forma de ver una página.
Trabajar con sitios (Haga Click para Abrir la Ficha)
Trabajar con sitios
En Microsoft Expression Web, el término "sitio" hace referencia a la colección de páginas, elementos multimedia, scripts y otros activos de un sitio web. Un sitio se puede almacenar en un equipo, un recurso compartido de archivos o un servidor remoto. Se pueden importar archivos de otros sitios, o incluso importar un sitio completo, así como exportar todo, desde una página a un sitio completo. Cuando el sitio esté listo, Expression Web puede publicarlo en Web.
Para obtener más información, vea los temas siguientes:
Expression Web también permite crear informes que le ayudarán a corregir errores de código, vínculos rotos, problemas de compatibilidad y otras cuestiones relacionadas con la accesibilidad general al sitio.
Para obtener más información, vea los temas siguientes:
Crear un sitio accesible(Haga Click para Abrir la Ficha)
Crear un sitio accesible
Si comprueba los problemas de accesibilidad de sus páginas web y los corrige, mejorará la experiencia de los visitantes del sitio con discapacidades. Entre otros tipos de problemas de accesibilidad, las personas con discapacidades suelen tener dificultades para leer el texto o para usar un teclado o un mouse (ratón).
Crear y editar páginas (Haga Click para Abrir la Ficha)
Crear y editar páginas
En Microsoft Expression Web, se dispone de varias opciones para crear páginas web. Después de crear una página, puede establecer las propiedades de la misma.
Es importante usar siempre Expression Web al cambiar el nombre de los archivos y carpetas de manera que los hipervínculos con origen o destino en el archivo al que se ha cambiado el nombre (o en los archivos de la carpeta a la que se ha cambiado el nombre) se actualicen de forma automática. Si cambia el nombre de un archivo o carpeta con el Explorador de Microsoft Windows, los hipervínculos con origen y destino en dicho archivo (o archivos de esa carpeta) no se actualizarán.
Nota:
Para garantizar que todos los visitantes del sitio puedan seguir las direcciones URL independientemente del idioma o del sistema operativo del equipo, guarde los archivos con nombres que usen sólo caracteres ASCII sencillos.
Para crear una nueva página web
Realice una de las siguientes acciones:
En el menú Archivo, elija Nuevo y, a continuación, haga clic en Página. En el cuadro de diálogo Nuevo, seleccione el tipo de página y haga clic en Aceptar.
Presione CTRL+N.
En la barra de tareas Común, haga clic en el botón Nuevo documento.
Para configurar el tipo predeterminado de documento que se creará
En el menú Herramientas, haga clic en Opciones del editor de páginas.
En el cuadro de diálogo Opciones del editor de páginas, en la ficha Creación, en el cuadro Tipo de documento predeterminado, seleccione el tipo de documento que desea establecer como predeterminado.
Nota:
La opción Documento predeterminado se usa cuando se crea un documento nuevo mediante el botón Nuevo documento en las barras de herramientas Común o Estándar, o mediante el botón Nueva página en el panel Lista de carpetas o en la vista Carpetas de un sitio.
Para cambiar las propiedades de una página web
Con la página web abierta, realice una de las siguientes acciones:
En la Vista de diseño, haga clic con el botón secundario en un área vacía y, a continuación, haga clic en Propiedades de página.
En el menú Archivo, haga clic en Propiedades.
En el cuadro de diálogo Propiedades de página, en la ficha General, haga lo siguiente:
Utilice
Acción
Title
Escriba el título de la página. El título aparece en la barra de título de varios exploradores web.
Descripción
Escriba la descripción de la página. La descripción se muestra en los resultados de búsqueda de algunos motores de búsqueda y es utilizada por algunos motores de búsqueda para indizar sitios. Se agrega una etiqueta Meta con el nombre "description" en el encabezado de la página.
Palabras clave
Escriba las palabras clave de la página. Algunos motores de búsqueda usan palabras clave para indizar sitios. Se agrega una etiqueta Meta con el nombre "keywords" en el encabezado de la página.
Para abrir una página web
Realice una de las siguientes acciones:
Para abrir una página del sitio actual, en el panel Lista de carpetas o en la vista Carpetas del sitio, haga doble clic en la página.
Para abrir una página de un sitio diferente o de un sistema de archivos local, haga clic en Abrir en el menú Archivo.
Nota:
Al abrir una página web de un sitio diferente, se abre una instancia nueva de Expression Web.
Para cambiar el nombre de una página o carpeta
En el panel Lista de carpetas o en la vista Carpetas del sitio, haga clic con el botón secundario en el archivo o carpeta y, luego haga clic en Cambiar nombre.
Escriba el nuevo nombre.
Para guardar una página web
Realice una de las siguientes acciones:
En la barra de herramientas Común, haga clic en el botón Guardar.
Haga clic con el botón secundario en la ficha de la parte superior de la ventana de edición y, a continuación, haga clic en Guardar.
En el menú Archivo, haga clic en Guardar.
Para guardar una página web en una ubicación diferente o con otro nombre distinto, haga clic en Guardar como en el menú Archivo.
Nota:
Si ha agregado imágenes, archivos de sonido u otros objetos a la página, Expression Web le pedirá que los guarde al guardar la página.
Trabajar con texto (Haga Click para Abrir la Ficha)
Trabajar con texto
Microsoft Expression Web proporciona varias herramientas para editar texto y darle formato, incluido un corrector ortográfico y una característica de búsqueda de sinónimos.
Para obtener más información acerca de las herramientas de texto de Expression Web, vea los temas siguientes:
Trabajar con hipervínculos (Haga Click para Abrir la Ficha)
Trabajar con hipervínculos
Un hipervínculo vincula una página web a otra. Cuando un visitante hace clic en el hipervínculo, la página de destino se muestra en un explorador web. Los hipervínculos también vinculan imágenes, archivos multimedia, ubicaciones concretas de una página web, direcciones de correo electrónico y programas. Además de representarse como texto, los hipervínculos también pueden ser imágenes.
El destino de un hipervínculo se codifica en forma de localizador uniforme de recursos (URL). Una dirección URL es una dirección que especifica un protocolo (como HTTP o FTP), un servidor web y una ruta de acceso de un archivo, como por ejemplo, http://www.example.com/expression/default.htm. Existen dos tipos de direcciones URL: absolutas y relativas.
Una dirección URL absoluta contiene una dirección completa que incluye el protocolo, el servidor web, la ruta y el nombre de archivo. A una dirección URL relativa le faltan una o más partes de la dirección. Los exploradores web obtienen la información que falta de la página que contiene la dirección URL. Por ejemplo, si faltan el protocolo y el servidor web, el explorador web utilizará el protocolo y el dominio de la página actual.
Es habitual que las páginas de un sitio utilicen direcciones URL relativas que solo contienen una ruta de acceso y un nombre de archivo parciales. Si se mueven los archivos a otro servidor, los hipervínculos seguirán funcionando siempre que las posiciones relativas de las páginas permanezcan inalteradas. Por ejemplo, si tiene un hipervínculo en Productos.htm que señala una página denominada Apple.htm y se mueven ambas páginas a la misma carpeta de otro servidor, la dirección URL del hipervínculo seguirá siendo correcta.
Nota:
Si el sitio contiene metadatos de Microsoft Expression Web, al mover o cambiar el nombre de las páginas web y otros archivos del sitio, Expression Web actualiza automáticamente todos los hipervínculos asociados. Para obtener más información sobre metadatos, consulte Agregar o quitar metadatos.
Hipervínculos de imágenes
Una hipervínculo de imagen es una imagen a la que se asigna una dirección URL de destino. Los hipervínculos de una imagen no siempre se ven. Sin embargo, un visitante del sitio puede saber si una imagen tiene un hipervínculo colocando el puntero sobre la misma. El puntero cambia su apariencia, normalmente a una mano con el dedo pulgar que señala hacia arriba. Puede asignar un hipervínculo a una imagen de una de las dos maneras siguientes.
Puede establecer que toda la imagen sea un hipervínculo. En este caso, el visitante puede hacer clic en cualquier parte de la imagen para mostrar el destino. Por ejemplo, un botón suele ser una imagen con un hipervínculo.
Puede asignar una o varias zonas activas (áreas con hipervínculos) a la imagen. Una imagen que contiene zonas activas se denomina mapa de imagen. Por ejemplo, un mapa de imagen puede ser una imagen que representa distintas partes de un sitio (como la página principal, una página de catálogo, etc.). El visitante hace clic en una zona determinada del mapa de imagen para mostrar la página correspondiente.
Marcadores (delimitadores HTML)
Un marcador es una ubicación o contenido que se ha marcado en una página web. Puede utilizar un marcador como destino de un hipervínculo. Por ejemplo, si desea que el explorador vaya a una sección concreta de una página web, agregue un marcador a esa sección y, después, agregue un hipervínculo que lo use como destino. Cuando el visitante del sitio haga clic en el hipervínculo, el explorador se desplaza a la parte de la página que contiene el marcador.
Trabajar con código (Haga Click para Abrir la Ficha)
Trabajar con código
Bajo las características de diseño visuales de Microsoft Expression Web hay un sólido editor de código con varias herramientas de codificación eficaces que le ayudan a trabajar directamente en el código de las páginas web y de otros archivos.
Estas son algunas de las herramientas que se proporcionan en la vista Código:
Codificación en colores Muestra el código en color.
Comprobador de compatibilidad Enumera los errores de código y el código no compatible.
IntelliSense Acelera la codificación al marcar las sugerencias de código adecuadas a la sección de código que está modificando.
Fragmentos de código Ayuda a reutilizar fragmentos de código o texto en las páginas.
Para obtener más información acerca de cómo trabajar en la vista Código, vea los temas siguientes:
Controlar el diseño de página (Haga Click para Abrir la Ficha)
Controlar el diseño de página
En los primeros tiempos del desarrollo web, la forma más habitual de diseñar una página era con una tabla. En cambio, los procedimientos recomendados modernos, basados en los estándares web, exigen separar la presentación del contenido y descartan el uso de tablas como herramientas de diseño.
Microsoft Expression Web ofrece dos formas de simplificar la tarea de controlar el diseño de página: hojas de estilos en cascada y plantillas web dinámicas. Los diseños basados en hojas de estilos en cascada son los bloques de creación básicos que definen las áreas de diseño de la página.
Las plantillas web dinámicas, que suelen incluir diseños basados en hojas de estilos en cascada, ayudan a aplicar la misma apariencia a varias páginas de un sitio sin tener que crear manualmente cada página.
Controlar las apariencias mediante estilos (Haga Click para Abrir la Ficha)
Controlar las apariencias mediante estilos
Las hojas de estilos en cascada (CSS) le otorgan el control sobre la presentación de las páginas web. Mediante CSS, puede colocar y definir con precisión la apariencia de los elementos de una página web.
Una CSS puede ser externa, interna o en línea, relativa a una página web, y una página web puede usar uno o varios de estos tipos de CSS a la vez. En general, los estilos que se definen en una CSS en línea tienen prioridad sobre los de una CSS interna o externa, y los estilos de una CSS interna tienen prioridad sobre los de una CSS externa.
CSS externas
Las hojas de estilos externas sirven para aplicar los mismos estilos de forma coherente en algunas o en todas las páginas web de un sitio. Al definir estilos en una o varias hojas de estilos externas y adjuntarlos a las páginas web, puede garantizar que todo el sitio tenga una apariencia coherente. Si decide cambiar un estilo, sólo tiene que hacer un cambio (en la CSS externa) y éste se refleja automáticamente en todas las páginas web que hagan referencia a dicho estilo y CSS.
Las CSS externas se incluyen en archivos .css, como global.css. La sintaxis de las CSS externas es la misma que la de las CSS internas (vea el ejemplo de la sección siguiente de este tema), excepto en que los estilos definidos en las CSS externas no están incluidos entre etiquetas <style>.
CSS internas
Las CSS internas, denominadas en ocasiones CSS incrustadas, sirven para definir estilos sólo para la página web actual y también para reemplazar los estilos que se definen en una CSS externa adjunta a la página web actual.
Las CSS internas se incluyen entre las etiquetas <head> de las páginas web.
Los estilos en línea sirven para aplicar las propiedades de las hojas de estilos en cascada a elementos individuales de una página sin tener que reutilizar el estilo. Los estilos en línea se definen dentro de las etiquetas iniciales de los elementos HTML de páginas web.
Agregar elementos multimedia a las páginas(Haga Click para Abrir la Ficha)
Agregar elementos multimedia a las páginas
Además de agregar imágenes, sonidos y vídeos, puede agregar elementos multimedia interactivos como archivos de Silverlight, Deep Zoom o Flash SWF a una página web en Microsoft Expression Web con el panel Cuadro de herramientas o el menú Insertar. Para obtener información acerca de los formatos de archivo compatibles con el Reproductor de Windows Media, vea el artículo Formatos de archivo multimedia del Reproductor de Windows Media.
También puede insertar éstos y otros tipos de archivos multimedia si escribe código en la vista Código de la página web. Para obtener información acerca los estándares web actuales para agregar archivos multimedia a páginas web, vea el apartado "Generic inclusion: the OBJECT element" (inclusión genérica del elemento OBJECT) en el tema Object, Images and Applets (Objetos, imágenes y applets) en el sitio web de World Wide Web Consortium.
Nota:
Al abrir una página web que contiene archivos multimedia distintos de SWF de Flash o Windows Media, es posible que reciba una advertencia que indica que la página contiene un control ActiveX desconocido o no firmado. Para obtener más información, vea Seguridad y controles ActiveX.
Para obtener información acerca de cómo agregar tipos específicos de elementos multimedia a una página, vea:
Trabajar con datos (Haga Click para Abrir la Ficha)
Trabajar con datos
Microsoft Expression Web permite integrar datos de bases de datos, o datos XML, a través de la tecnología ASP.NET 2.0. También puede utilizar vistas de datos para integrar los datos de archivos XML en páginas HTML.
Con las vistas de datos puede crear vistas de sólo lectura de direcciones URL o archivos XML generados mediante XSLT, con una completa edición WYSIWYG (lo que se ve es lo que se imprime), y obtener la representación que prefiera, ya sea con JavaScript en páginas HTML o con ASP.NET 2.0 en servidores de Internet Information Services (IIS).
Expression Web admite el uso de la experiencia completa de tiempo de diseño de ASP.NET 2.0 para realizar el enlace de datos sin código a controles de origen de datos. Puede trabajar en un sitio ASP.NET con Expression Web al mismo tiempo que un programador trabaja en el código del sitio en Microsoft Visual Studio.
Integración de XML con vistas de datos
En las páginas HTML, use la característica Vista de datos. Para insertar una vista de datos, arrastre y coloque un archivo XML en el área de diseño, o utilice el comando del menú y haga que la vista de datos señale a la dirección URL o archivo XML. La vista de datos generará tanto el código XSLT como el código JavaScript necesarios para la representación en el explorador. Puede filtrar y ordenar los datos, cambiar el estilo de la vista y usar formato condicional para variar el estilo de HTML en función de los valores de los datos. A medida que usa los comandos de formato HTML normales (por ejemplo, para modificar las propiedades de las tablas), la vista de datos los traduce al código XSLT subyacente.
Integración de bases de datos con ASP.NET 2.0
En las páginas ASP.NET puede colocar controles enlazados a datos, como GridView, Repeater o FormView, en una página y usar el Asistente para la configuración de orígenes de datos para enlazar el control a una base de datos de SQL Server, Access, Oracle, etc. También puede usar las Vista de datos de las páginas ASP.NET con un origen de datos XML. Considere esta característica como una eficaz herramienta de diseño para el control <asp:xml>, que representa los datos XML de una dirección URL o archivo XML mediante XSLT.
Trabajar con sitios ASP.NET (Haga Click para Abrir la Ficha)
Trabajar con sitios ASP.NET
Las páginas web ASP.NET le permiten crear contenido dinámico para el sitio. Con una página HTML estática (archivo .htm o .html), el servidor satisface una solicitud web leyendo el archivo y enviándolo tal como está al explorador. En cambio, cuando alguien solicita una página web ASP.NET (archivo .aspx), la página se ejecuta como un programa en el servidor web. Mientras la página se está ejecutando, puede realizar cualquier tarea que requiera el sitio, incluido el cálculo de valores, la lectura o escritura de información de la base de datos o la llamada a otros programas. Como resultado, la página genera dinámicamente marcado (elementos en HTML u otro lenguaje de marcado) y envía este resultado dinámico al explorador.
Importante:
Para poder usar los controles ASP.NET en Microsoft Expression Web debe tener Microsoft .NET Framework Redistributable Package versión 2.0 instalado en el equipo. Puede descargar .NET Framework en el Centro de descarga Microsoft. También debe estar trabajando en un sitio que resida en un servidor que tiene ASP.NET 2.0 instalado.
Expression Web y ASP.NET
Expression Web permite agregar cualquier control ASP.NET a una página .aspx y definir las propiedades que determinan el comportamiento y la apariencia. Con los controles ASP.NET, pueden usarse todas las herramientas de estilo, formato y diseño de Expression Web.
Expression Web permite abrir y diseñar sitios creados en Microsoft Visual Studio 2005 o en Microsoft Visual Web Developer Express Edition. A su vez, tanto Visual Studio como Visual Web Developer Express pueden abrir y modificar los sitios de Expression Web. Un escenario típico en el desarrollo web es que un diseñador use Expression Web para definir la apariencia de un sitio, incluido el diseño de las páginas ASP.NET con controles ASP.NET. Luego el diseñador abre la página en Visual Studio 2005 o Visual Web Developer Express Edition y agrega el código de la página.
También es posible escribir código en línea para controles ASP.NET en Expression Web. (a continuación se muestra un breve ejemplo). No obstante, en Visual Studio 2005 y Visual Web Developer Express, encontrará una variedad mucho más amplia de herramientas de depuración y codificación. Por ejemplo, puede crear archivos de código subyacente para controles ASP.NET en Visual Studio 2005. Para optimizar el diseño y el desarrollo, diseñe las páginas en Expression Web y luego codifíquelas y depúrelas en Visual Studio .NET 2005 o Visual Web Developer.
Para crear una página ASP.NET
Realice una de las siguientes acciones:
Ya sea en la barra de herramientas Común o Estándar, haga clic en la flecha junto al botón Nuevo documento
y, a continuación, haga clic en ASPX.
En el menú Archivo, haga clic en Nuevo. En el cuadro de diálogo Nuevo, en la ficha Página, haga clic en General en la lista de la izquierda y haga clic en ASPX en la lista central. Haga clic en Aceptar.
15.-Trabajar con Base de Datos conexiones: Ver Video
... ó Puedes verlo en Youtube Aquí:
Trabajar con sitios PHP (Haga Click para Abrir la Ficha)
Trabajar con sitios PHP
PHP es un lenguaje de scripting de servidor que permite generar páginas web dinámicas. Las páginas PHP pueden contener texto, HTML y bloques de scripts. Cuando un explorador solicita una página PHP, se ejecuta el script PHP en el servidor web y el HTML resultante se muestra en el explorador.
Una página PHP debe tener una extensión compatible con PHP. Normalmente, un archivo PHP termina con .php, aunque también existen otras extensiones PHP, como .php4 y .phtml. Sin embargo, .php es la extensión más habitual.
En el menú Archivo, seleccione Nuevo y, a continuación, haga clic en PHP.
En el menú Archivo, haga clic en Nuevo. En el cuadro de diálogo Nuevo, en la ficha Página, haga clic en General, a continuación, en PHP y, por último, en Aceptar.
Bloques de scripts PHP
Un bloque de script PHP puede aparecer en cualquier ubicación de una página .php y cada página puede contener más de un bloque de script PHP. Un bloque de script PHP debe empezar con <?php y terminar con ?>.
También puede personalizar la presentación del código PHP en la vista Código para que se puedan identificar fácilmente los bloques de scripts PHP en la página. Para obtener más información, vea Cambiar el color del código PHP.
Para obtener más información acerca de PHP, consulte el tutorial de PHP (en inglés) en el sitio web de W3 Schools.
Introducción.gif)
Sugerencia:.png)
.png)
.png)
.png)
.png)
.gif)
Nota:.gif)
Nota:.gif)
Nota:.gif)
Importante:.png)
y, a continuación, haga clic en ASPX. .gif)
Importante: