Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Tuesday, January 07, 2014

Lenguajes de Programacion Web (Ventajas y Desventajas).


Masters Hackers


Lenguajes de Programacion Web (Ventajas y Desventajas)
Antiguo 21-Oct-2010, 14:28   #1
Usuario Adicto

Avatar de porter7790

porter7790 está desconectado
Fecha de Ingreso: 23-September-2010
Mensajes: 229
Total 'Thanks' Received by This User :
3 For This Post
287 Total
porter7790 has much to be proud ofporter7790 has much to be proud ofporter7790 has much to be proud ofporter7790 has much to be proud ofporter7790 has much to be proud ofporter7790 has much to be proud ofporter7790 has much to be proud ofporter7790 has much to be proud ofporter7790 has much to be proud ofporter7790 has much to be proud of
Poder de Credibilidad: 246
Lightbulb Lenguajes de Programacion Web (Ventajas y Desventajas)

HTML
Desde el surgimiento de internet se han publicado sitios web gracias al lenguaje HTML. Es un lenguaje estático
para el desarrollo de sitios web (acrónimo en inglés de HyperText Markup Language, en español Lenguaje de
Marcas Hipertextuales). Desarrollado por el World Wide Web Consortium (W3C). Los archivos pueden tener
las extensiones (htm, html).
Sintaxis:
Código HTML:
<html> (Inicio del documento HTML)
<head>
( Cabecera )
</head>
<body>
( Cuerpo )
</body>
</html>
<b> </b> Negrita
<p> </p> Definir parrafo
<etiqueta> Apertura de la etiqueta
</etiqueta> Cierre de la etiqueta
Ventajas:
· Sencillo que permite describir hipertexto.
· Texto presentado de forma estructurada y agradable.
· No necesita de grandes conocimientos cuando se cuenta con un editor de páginas web o WYSIWYG.
· Archivos pequeños.
· Despliegue rápido.
· Lenguaje de fácil aprendizaje.
· Lo admiten todos los exploradores.
Desventajas:
· Lenguaje estático.
· La interpretación de cada navegador puede ser diferente.
· Guarda muchas etiquetas que pueden convertirse en “basura” y dificultan la corrección.
· El diseño es más lento.
· Las etiquetas son muy limitadas.



Javascript
Este es un lenguaje interpretado, no requiere compilación. Fue creado por Brendan Eich en la empresa Netscape
Communications. Utilizado principalmente en páginas web. Es similar a Java, aunque no es un lenguaje
orientado a objetos, el mismo no dispone de herencias. La mayoría de los navegadores en sus últimas versiones
interpretan código Javascript.
El código Javascript puede ser integrado dentro de nuestras páginas web. Para evitar incompatibilidades el
World Wide Web Consortium (W3C) diseño un estándar denominado DOM (en inglés Document Object
Model, en su traducción al español Modelo de Objetos del Documento).
Sintaxis:
Código:
Código HTML:
<script type="text/javascript"> ... </script>
Ventajas:
· Lenguaje de scripting seguro y fiable.
· Los script tienen capacidades limitadas, por razones de seguridad.
· El código Javascript se ejecuta en el cliente.
Desventajas:
· Código visible por cualquier usuario.
Formatted: Font: (Default) Arial
· El código debe descargarse completamente.
· Puede poner en riesgo la seguridad del sitio, con el actual problema llamado XSS (significa en inglés
Cross Site Scripting renombrado a XSS por su similitud con las hojas de estilo CSS).



PHP
Es un lenguaje de programación utilizado para la creación de sitio web. PHP es un acrónimo recursivo que
significa “PHP Hypertext Pre-processor”, (inicialmente se llamó Personal Home Page). Surgió en 1995,
desarrollado por PHP Group.
PHP es un lenguaje de script interpretado en el lado del servidor utilizado para la generación de páginas web
dinámicas, embebidas en páginas HTML y ejecutadas en el servidor. PHP no necesita ser compilado para
ejecutarse. Para su funcionamiento necesita tener instalado Apache o IIS con las librerías de PHP. La mayor
parte de su sintaxis ha sido tomada de C, Java y Perl con algunas características específicas. Los archivos
cuentan con la extensión (php).
Sintaxis:
Código:
La sintaxis utilizada para incorporar código PHP es la siguiente:
Código HTML:
<?
$mensaje = “Hola”;
echo $mensaje;
?>
Tambien puede usarse:
Código:
<?php
$mensaje = “Hola”;
echo $mensaje;
?>
Ventajas:
· Muy fácil de aprender.
· Se caracteriza por ser un lenguaje muy rápido.
· Soporta en cierta medida la orientación a objeto. Clases y herencia.
· Es un lenguaje multiplataforma: Linux, Windows, entre otros.
· Capacidad de conexión con la mayoría de los manejadores de base de datos: MysSQL, PostgreSQL,
Oracle, MS SQL Server, entre otras.
· Capacidad de expandir su potencial utilizando módulos.
· Posee documentación en su página oficial la cual incluye descripción y ejemplos de cada una de sus
funciones.
· Es libre, por lo que se presenta como una alternativa de fácil acceso para todos.
· Incluye gran cantidad de funciones.
· No requiere definición de tipos de variables ni manejo detallado del bajo nivel.
Desventajas:
· Se necesita instalar un servidor web.
· Todo el trabajo lo realiza el servidor y no delega al cliente. Por tanto puede ser más ineficiente a medida
que las solicitudes aumenten de número.
· La legibilidad del código puede verse afectada al mezclar sentencias HTML y PHP.
· La programación orientada a objetos es aún muy deficiente para aplicaciones grandes.
· Dificulta la modularización.
· Dificulta la organización por capas de la aplicación.
Seguridad:
PHP es un poderoso lenguaje e intérprete, ya sea incluido como parte de un servidor web en forma de módulo o
ejecutado como un binario CGI separado, es capaz de acceder a archivos, ejecutar comandos y abrir conexiones
de red en el servidor. Estas propiedades hacen que cualquier cosa que sea ejecutada en un servidor web sea
insegura por naturaleza.
PHP está diseñado específicamente para ser un lenguaje más seguro para escribir programas CGI que Perl o C,
y con la selección correcta de opciones de configuración en tiempos de compilación y ejecución, y siguiendo
algunas prácticas correctas de programación.


ASP
Es una tecnología del lado de servidor desarrollada por Microsoft para el desarrollo de sitio web dinámicos.
ASP significa en inglés (Active Server Pages), fue liberado por Microsoft en 1996. Las páginas web
desarrolladas bajo este lenguaje es necesario tener instalado Internet Information Server (IIS).
ASP no necesita ser compilado para ejecutarse. Existen varios lenguajes que se pueden utilizar para crear
páginas ASP. El más utilizado es VBScript, nativo de Microsoft. ASP se puede hacer también en Perl and
Jscript (no JavaScript). El código ASP puede ser insertado junto con el código HTML. Los archivos cuentan
con la extensión (asp).
Sintaxis:
Código:
Código HTML:
<% %>
Ventajas:
· Usa Visual Basic Script, siendo fácil para los usuarios.
· Comunicación óptima con SQL Server.
· Soporta el lenguaje JScript (Javascript de Microsoft).
Desventajas:
· Código desorganizado.
· Se necesita escribir mucho código para realizar funciones sencillas.
· Tecnología propietaria.
· Hospedaje de sitios web costosos.
ASP.NET:
Este es un lenguaje comercializado por Microsoft, y usado por programadores para desarrollar entre otras
funciones, sitios web. ASP.NET es el sucesor de la tecnología ASP, fue lanzada al mercado mediante una
estrategia de mercado denominada .NET.
El ASP.NET fue desarrollado para resolver las limitantes que brindaba tu antecesor ASP. Creado para
desarrollar web sencillas o grandes aplicaciones. Para el desarrollo de ASP.NET se puede utilizar C#, VB.NET
o J#. Los archivos cuentan con la extensión (aspx). Para su funcionamiento de las páginas se necesita tener
instalado IIS con el Framework .Net. Microsft Windows 2003 incluye este framework, solo se necesitará
instalarlo en versiones anteriores.
Ventajas:
· Completamente orientado a objetos.
· Controles de usuario y personalizados.
· División entre la capa de aplicación o diseño y el código.
· Facilita el mantenimiento de grandes aplicaciones.
· Incremento de velocidad de respuesta del servidor.
· Mayor velocidad.
· Mayor seguridad.
Desventajas:
· Mayor consumo de recursos.



JSP
Es un lenguaje para la creación de sitios web dinámicos, acrónimo de Java Server Pages. Está orientado a
desarrollar páginas web en Java. JSP es un lenguaje multiplataforma. Creado para ejecutarse del lado del
servidor.
JSP fue desarrollado por Sun Microsystems. Comparte ventajas similares a las de ASP.NET, desarrollado para
la creación de aplicaciones web potentes. Posee un motor de páginas basado en los servlets de Java. Para su
funcionamiento se necesita tener instalado un servidor Tomcat.
Sintaxis:
Código:
Código HTML:
<%= new java.util.Date() %>
Caracteristicas:
· Código separado de la lógica del programa.
· Las páginas son compiladas en la primera petición.
· Permite separar la parte dinámica de la estática en las páginas web.
· Los archivos se encuentran con la extensión (jsp).
· El código JSP puede ser incrustado en código HTML.
Elementos de JSP:
Los elementos que pueden ser insertados en las páginas JSP son los siguientes:
· Código: se puede incrustar código “Java”.
· Directivas: permite controlar parámetros del servlet.
· Acciones: permite alterar el flujo normal de ejecución de una página.
Ventajas:
· Ejecución rápida del servlets.
· Crear páginas del lado del servidor.
· Multiplataforma.
· Código bien estructurado.
· Integridad con los módulos de Java.
· La parte dinámica está escrita en Java.
· Permite la utilización se servlets.
Desventajas:
· Complejidad de aprendizaje.



Python:
Es un lenguaje de programación creado en el año 1990 por Guido van Rossum, es el sucesor del lenguaje de
programación ABC. Python es comparado habitualmente con Perl. Los usuarios lo consideran como un lenguaje
más limpio para programar. Permite la creación de todo tipo de programas incluyendo los sitios web.
Su código no necesita ser compilado, por lo que se llama que el código es interpretado. Es un lenguaje de
programación multiparadigma, lo cual fuerza a que los programadores adopten por un estilo de programación
particular:
· Programación orientada a objetos.
· Programación estructurada.
· Programación funcional.
· Programación orientada a aspectos.
·
Sintaxis:
Ejemplo de una clase en Phyton:
Código:
Código HTML:
def dibujar_muneco(opcion):
if opcion == 1:
C.create_line(580, 150, 580, 320, width=4, fill="blue")
C.create_oval(510, 150, 560, 200, width=2, fill='PeachPuff')
Ventajas:
· Libre y fuente abierta.
· Lenguaje de propósito general.
· Gran cantidad de funciones y librerías.
· Sencillo y rápido de programar.
· Multiplataforma.
· Licencia de código abierto (Opensource).
· Orientado a Objetos.
· Portable.
Desventajas:
· Lentitud por ser un lenguaje interpretado.



Ruby
Es un lenguaje interpretado de muy alto nivel y orientado a objetos. Desarrollado en el 1993 por el programador
japonés Yukihiro “Matz” Matsumoto. Su sintaxis está inspirada en Phyton, Perl. Es distribuido bajo licencia de
software libre (Opensource).
Ruby es un lenguaje dinámico para una programación orientada a objetos rápida y sencilla. Para los que deseen
iniciarse en este lenguaje pueden encontrar un tutorial interactivo de ruby. Se encuentra también a disposición
de estos usuarios un sitio con informaciones y cursos en español.
Sintaxis:
Código:
Código HTML:
puts "hola"
Caracteristicas:
· Existe diferencia entre mayúsculas y minúsculas.
· Múltiples expresiones por líneas, separadas por punto y coma “;”.
· Dispone de manejo de excepciones.
· Ruby puede cargar librerías de extensiones dinámicamente si el (Sistema Operativo) lo permite.
· Portátil.
Ventajas:
· Permite desarrollar soluciones a bajo Costo.
· Software libre.
· Multiplataforma.

Los diferentes lenguajes de programación para la web.



Los diferentes lenguajes de programación para la web

Actualmente existen diferentes lenguajes de programación para desarrollar en la web, estos han ido surgiendo debido a las tendencias y necesidades de las plataformas. En el presente artículo pretende mostrar las ventajas y desventajas de los lenguajes más conocidos.
Desde los inicios de Internet, fueron surgiendo diferentes demandas por los usuarios y se dieron soluciones mediante lenguajes estáticos. A medida que paso el tiempo, las tecnologías fueron desarrollándose y surgieron nuevos problemas a dar solución. Esto dio lugar a desarrollar lenguajes de programación para la web dinámicos, que permitieran interactuar con los usuarios y utilizaran sistemas de Bases de Datos. A continuación daremos una introducción a los diferentes lenguajes de programación para la web.

Lenguaje HTML

Desde el surgimiento de internet se han publicado sitios web gracias al lenguaje HTML. Es un lenguaje estático para el desarrollo de sitios web (acrónimo en inglés de HyperText Markup Language, en español Lenguaje de Marcas Hipertextuales). Desarrollado por el World Wide Web Consortium (W3C). Los archivos pueden tener las extensiones (htm, html).

Sintaxis:

<html> (Inicio del documento HTML)
<head>
( Cabecera )
</head>
<body>
( Cuerpo )
</body>
</html>

<b>  </b> Negrita
<p>  </p> Definir parrafo
<etiqueta> Apertura de la etiqueta
</etiqueta> Cierre de la etiqueta

Ventajas:

  • Sencillo que permite describir hipertexto.
  • Texto presentado de forma estructurada y agradable.
  • No necesita de grandes conocimientos cuando se cuenta con un editor de páginas web o WYSIWYG.
  • Archivos pequeños.
  • Despliegue rápido.
  • Lenguaje de fácil aprendizaje.
  • Lo admiten todos los exploradores.

Desventajas:

  • Lenguaje estático.
  • La interpretación de cada navegador puede ser diferente.
  • Guarda muchas etiquetas que pueden convertirse en “basura” y dificultan la corrección.
  • El diseño es más lento.
  • Las etiquetas son muy limitadas.

Lenguaje Javascript

Este es un lenguaje interpretado, no requiere compilación. Fue creado por Brendan Eich en la empresa Netscape Communications. Utilizado principalmente en páginas web. Es similar a Java, aunque no es un lenguaje orientado a objetos, el mismo no dispone de herencias. La mayoría de los navegadores en sus últimas versiones interpretan código Javascript.
El código Javascript puede ser integrado dentro de nuestras páginas web. Para evitar incompatibilidades el World Wide Web Consortium (W3C) diseño un estándar denominado DOM (en inglés Document Object Model, en su traducción al español Modelo de Objetos del Documento).

Sintaxis:

<script type="text/javascript"> ... </script>

Ventajas:

  • Lenguaje de scripting seguro y fiable.
  • Los script tienen capacidades limitadas, por razones de seguridad.
  • El código Javascript se ejecuta en el cliente.

Desventajas:

  • Código visible por cualquier usuario.
  • El código debe descargarse completamente.
  • Puede poner en riesgo la seguridad del sitio, con el actual problema llamado XSS (significa en inglés Cross Site Scripting renombrado a XSS por su similitud con las hojas de estilo CSS).

Lenguaje PHP

Es un lenguaje de programación utilizado para la creación de sitio web. PHP es un acrónimo recursivo que significa “PHP Hypertext Pre-processor”, (inicialmente se llamó Personal Home Page). Surgió en 1995, desarrollado por PHP Group.
PHP es un lenguaje de script interpretado en el lado del servidor utilizado para la generación de páginas web dinámicas, embebidas en páginas HTML y ejecutadas en el servidor. PHP no necesita ser compilado para ejecutarse. Para su funcionamiento necesita tener instalado Apache o IIS con las librerías de PHP. La mayor parte de su sintaxis ha sido tomada de C, Java y Perl con algunas características específicas. Los archivos cuentan con la extensión (php).

Sintaxis:

La sintaxis utilizada para incorporar código PHP es la siguiente:
<? 
$mensaje = “Hola”; 
echo $mensaje;
?>
También puede usarse:
<?php 
$mensaje = “Hola”; 
echo $mensaje;
?>

Ventajas:

  • Muy fácil de aprender.
  • Se caracteriza por ser un lenguaje muy rápido.
  • Soporta en cierta medida la orientación a objeto. Clases y herencia.
  • Es un lenguaje multiplataforma: Linux, Windows, entre otros.
  • Capacidad de conexión con la mayoría de los manejadores de base de datos: MysSQL, PostgreSQL, Oracle, MS SQL Server, entre otras.
  • Capacidad de expandir su potencial utilizando módulos.
  • Posee documentación en su página oficial la cual incluye descripción y ejemplos de cada una de sus funciones.
  • Es libre, por lo que se presenta como una alternativa de fácil acceso para todos.
  • Incluye gran cantidad de funciones.
  • No requiere definición de tipos de variables ni manejo detallado del bajo nivel.

Desventajas:

  • Se necesita instalar un servidor web.
  • Todo el trabajo lo realiza el servidor y no delega al cliente. Por tanto puede ser más ineficiente a medida que las solicitudes aumenten de número.
  • La legibilidad del código puede verse afectada al mezclar sentencias HTML y PHP.
  • La programación orientada a objetos es aún muy deficiente para aplicaciones grandes.
  • Dificulta la modularización.
  • Dificulta la organización por capas de la aplicación.

Seguridad:

PHP es un poderoso lenguaje e intérprete, ya sea incluido como parte de un servidor web en forma de módulo o ejecutado como un binario CGI separado, es capaz de acceder a archivos, ejecutar comandos y abrir conexiones de red en el servidor. Estas propiedades hacen que cualquier cosa que sea ejecutada en un servidor web sea insegura por naturaleza.
PHP está diseñado específicamente para ser un lenguaje más seguro para escribir programas CGI que Perl o C, y con la selección correcta de opciones de configuración en tiempos de compilación y ejecución, y siguiendo algunas prácticas correctas de programación.

Lenguaje ASP

Es una tecnología del lado de servidor desarrollada por Microsoft para el desarrollo de sitio web dinámicos. ASP significa en inglés (Active Server Pages), fue liberado por Microsoft en 1996. Las páginas web desarrolladas bajo este lenguaje es necesario tener instalado Internet Information Server (IIS).
ASP no necesita ser compilado para ejecutarse. Existen varios lenguajes que se pueden utilizar para crear páginas ASP. El más utilizado es VBScript, nativo de Microsoft. ASP se puede hacer también en Perl and Jscript (no JavaScript). El código ASP puede ser insertado junto con el código HTML. Los archivos cuentan con la extensión (asp).

Sintaxis:

<%  %>

Ventajas:

  • Usa Visual Basic Script, siendo fácil para los usuarios.
  • Comunicación óptima con SQL Server.
  • Soporta el lenguaje JScript (Javascript de Microsoft).

Desventajas:

  • Código desorganizado.
  • Se necesita escribir mucho código para realizar funciones sencillas.
  • Tecnología propietaria.
  • Hospedaje de sitios web costosos.

Lenguaje ASP.NET

Este es un lenguaje comercializado por Microsoft, y usado por programadores para desarrollar entre otras funciones, sitios web. ASP.NET es el sucesor de la tecnología ASP, fue lanzada al mercado mediante una estrategia de mercado denominada .NET.
El ASP.NET fue desarrollado para resolver las limitantes que brindaba tu antecesor ASP. Creado para desarrollar web sencillas o grandes aplicaciones. Para el desarrollo de ASP.NET se puede utilizar C#, VB.NET o J#. Los archivos cuentan con la extensión (aspx). Para su funcionamiento de las páginas se necesita tener instalado IIS con el Framework .Net. Microsft Windows 2003 incluye este framework, solo se necesitará instalarlo en versiones anteriores.

Sintaxis:

Ventajas:

  • Completamente orientado a objetos.
  • Controles de usuario y personalizados.
  • División entre la capa de aplicación o diseño y el código.
  • Facilita el mantenimiento de grandes aplicaciones.
  • Incremento de velocidad de respuesta del servidor.
  • Mayor velocidad.
  • Mayor seguridad.

Desventajas:

  • Mayor consumo de recursos.

Lenguaje JSP

Es un lenguaje para la creación de sitios web dinámicos, acrónimo de Java Server Pages. Está orientado a desarrollar páginas web en Java. JSP es un lenguaje multiplataforma. Creado para ejecutarse del lado del servidor.
JSP fue desarrollado por Sun Microsystems. Comparte ventajas similares a las de ASP.NET, desarrollado para la creación de aplicaciones web potentes. Posee un motor de páginas basado en los servlets de Java. Para su funcionamiento se necesita tener instalado un servidor Tomcat.

Sintaxis:

<%= new java.util.Date() %>

Características:

  • Código separado de la lógica del programa.
  • Las páginas son compiladas en la primera petición.
  • Permite separar la parte dinámica de la estática en las páginas web.
  • Los archivos se encuentran con la extensión (jsp).
  • El código JSP puede ser incrustado en código HTML.

Elementos de JSP

Los elementos que pueden ser insertados en las páginas JSP son los siguientes:
  • Código: se puede incrustar código “Java”.
  • Directivas: permite controlar parámetros del servlet.
  • Acciones: permite alterar el flujo normal de ejecución de una página.

Ventajas:

  • Ejecución rápida del servlets.
  • Crear páginas del lado del servidor.
  • Multiplataforma.
  • Código bien estructurado.
  • Integridad con los módulos de Java.
  • La parte dinámica está escrita en Java.
  • Permite la utilización se servlets.

Desventajas:

  • Complejidad de aprendizaje.

Lenguaje Python

Es un lenguaje de programación creado en el año 1990 por Guido van Rossum, es el sucesor del lenguaje de programación ABC. Python es comparado habitualmente con Perl. Los usuarios lo consideran como un lenguaje más limpio para programar. Permite la creación de todo tipo de programas incluyendo los sitios web.
Su código no necesita ser compilado, por lo que se llama que el código es interpretado. Es un lenguaje de programación multiparadigma, lo cual fuerza a que los programadores adopten por un estilo de programación particular:
  • Programación orientada a objetos.
  • Programación estructurada.
  • Programación funcional.
  • Programación orientada a aspectos.

Sintaxis:

Ejemplo de una clase en Phyton:
def dibujar_muneco(opcion):
    if opcion == 1:
        C.create_line(580, 150, 580, 320, width=4, fill="blue")
        C.create_oval(510, 150, 560, 200, width=2, fill='PeachPuff')

Ventajas:

  • Libre y fuente abierta.
  • Lenguaje de propósito general.
  • Gran cantidad de funciones y librerías.
  • Sencillo y rápido de programar.
  • Multiplataforma.
  • Licencia de código abierto (Opensource).
  • Orientado a Objetos.
  • Portable.

Desventajas:

  • Lentitud por ser un lenguaje interpretado.

Lenguaje Ruby

Es un lenguaje interpretado de muy alto nivel y orientado a objetos. Desarrollado en el 1993 por el programador japonés Yukihiro “Matz” Matsumoto. Su sintaxis está inspirada en Phyton, Perl. Es distribuido bajo licencia de software libre (Opensource).
Ruby es un lenguaje dinámico para una programación orientada a objetos rápida y sencilla. Para los que deseen iniciarse en este lenguaje pueden encontrar un tutorial interactivo de ruby. Se encuentra también a disposición de estos usuarios un sitio con informaciones y cursos en español.

Sintaxis:

puts "hola"

Características:

  • Existe diferencia entre mayúsculas y minúsculas.
  • Múltiples expresiones por líneas, separadas por punto y coma “;”.
  • Dispone de manejo de excepciones.
  • Ruby puede cargar librerías de extensiones dinámicamente si el (Sistema Operativo) lo permite.
  • Portátil.

Ventajas:

  • Permite desarrollar soluciones a bajo Costo.
  • Software libre.
  • Multiplataforma.
Los invitamos a conocer nuestras categorías sobre: Ajax, ASP, Bases de Datos, CSS, Javascript, Perl/CGI, PHP, RubyonRails, XHTML y XML para aprender más sobre los diferentes lenguajes de programación para la web.

Damián Pérez Valdés
Webmaster, Administrador de Sistemas, con experiencia en desarrollo web y de aplicaciones.
Síguenos en

What are the Web standards CSS and XHTML?



What are the Web standards CSS and XHTML?

Answer: CSS stands for "Cascading Style Sheets," which are documents that explain how HTML pages should be displayed. For example, a style sheet named "mystyle.css" may be referenced in the header of an HTML page "index.html." The CSS document might say that all text should have the Verdana font and be 12pt in size and that all links should be green and underlined. Style sheets are a great way for Web developers to provide uniform text and page formatting across large websites.
XHTML is a newer version of HTML that is reformulated in XML and is compatible with XML-based programs. It is a more strict specification than HTML, meaning more errors will be generated if the code isn't written correctly. This is because XML is a more strict language than HTML.
For more information about CSS and XHTML, visit the World Wide Consortium website.

Entered: January 22, 2005 – by Per Christensson

Sunday, January 05, 2014

What are the Web standards CSS and XHTML?


What are the Web standards CSS and XHTML?

Answer: CSS stands for "Cascading Style Sheets," which are documents that explain how HTML pages should be displayed. For example, a style sheet named "mystyle.css" may be referenced in the header of an HTML page "index.html." The CSS document might say that all text should have the Verdana font and be 12pt in size and that all links should be green and underlined. Style sheets are a great way for Web developers to provide uniform text and page formatting across large websites.
XHTML is a newer version of HTML that is reformulated in XML and is compatible with XML-based programs. It is a more strict specification than HTML, meaning more errors will be generated if the code isn't written correctly. This is because XML is a more strict language than HTML.
For more information about CSS and XHTML, visit the World Wide Consortium website.

Entered: January 22, 2005 – by Per Christensson

What is the difference between a PHP and HTML Web page?


What is the difference between a PHP and HTML Web page?

Answer: PHP files are just like HTML files, but they can include both HTML and PHP code. The PHP code is parsed (or executed) by the Web server when the page is accessed and the resulting output is written as HTML within the Web page. When a user accesses a PHP page, his Web browser only gets sent the HTML code, since the Web server has processed the PHP code in the background. Most PHP pages are processed so quickly that it does not noticeably slow down the loading of the Web page.
The .php extension is important, since it tells the Web server that the page may include PHP code. Therefore, it must be run through the server's PHP engine before being sent to a client's Web browser. This allows dynamic content to be generated each time the Web page is loaded, based on the variables included in the PHP code. For example, PHP pages may load objects such as the current date and time, data from form fields submitted by a user, or information from a database. Still, once the page reaches the user's Web browser, everything is formatted as HTML.

Entered: January 16, 2005 – by Per Christensson


Tuesday, October 09, 2012

Curso y Video Tutorial de Dreamweaver CS5

Página inicial
InicioAdelante

Unidad 1. Conceptos básicos de Dreamweaver CS5 (I)

Índice detallado de la unidad 1

1.1. Qué es Dreamweaver CS5

Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales.
Dw Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual.
Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.
Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa.
Nota: Esta versión estará disponible hasta que Adobe lance la nueva versión del programa.
Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas registradas Dreamweaver y Adobe. aulaClic no tiene ninguna relación con Adobe.
Las páginas web están escritas en HTML. Si no conoces las características básicas de HTML puedes verlas aquí. Básico

1.2. Novedades de Dreamweaver CS5

En este punto comentaremos las características que aporta esta nueva versión sobre la anterior.
• Compatibilidad con CMS integrada. Un sistema de gestión de contenidos (en inglés Content Management System, abreviado CMS) es in interfaz o programa que nos permite gestionar el contenido de un sitio web. Cada vez son más usados, y ahora Dreamweaver integra con los principales, permitiéndos crear nuestras páginas con la estructura adecuada.
Joomla - WordPress - Drupal

• Inspeccionar CSS. Ahora, con la opción Inspeccionar, podemos ver claramente los márgenes aplicados al elemento seleccionado, y qué propiedades le afectan, tanto si son propias, como heredadas de los elementos padre.

• Integración Adobe Browserlab. Adobe Browser Lab es un servicio en línea de Adobe, que nos permite comparar cómo se ve una misma página web en las distintas versiones de Internet Explorer, Firefox y Safari, bajo los sistemas operativos de Windows o Mac OS.
Este servicio es fácilmente accesible desde Dreamweaver, pero realmente cualquiera puede usarlo desde su página web.

• Configuración sencilla de sitios. Ahora resulta más sencillo configurar nuestro sitio local y remoto. Ya que se han simplificado las opciones esenciales, y distinguido más las opciones avanzadas y poco importantes.

• Sugerencias de código. Ahora las sugerencias de código incluyen nuestras clases personalizadas, y los comandos y funciones propios de los distintos CMS soportados.

Unidad 1. Conceptos básicos de Dreamweaver CS5 (II)

1.3. Editar páginas web

Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo.
Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página, sobre todo si no estamos demasiado familiarizados con el HTML. Aunque también es cierto que escribir el código nos da más control sobre él, y sobre todo al principio, nos ayudará a aprenderlo rápidamente.
Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.
Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.

1.4. Cómo tener una página en Internet

Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para una página personal, sobre todo al comienzo.
Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra página. Este nombre no puede estar repetido en Internet, ha de ser único, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com.
En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que nuestra página no será más que un archivo dentro de la de la empresa contratada.
A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número de cuentas de correo electrónico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a través de programación vía Web, aunque esto último será útil sólo para usuarios avanzados.
Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com.
• En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo.
Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrás que se encuentre a disposición de todo el mundo en Internet.
Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que subirla a tu servidor manteniendo la estructura del local. Es decir, deberás subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organización de las carpetas. Si no lo haces de este modo, tu sitio experimentará fallos y enlaces que no funcionarán.

Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes, ni espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes en él.
Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, los nombres en minúscula. Algunos servidores (los que utilizan linux) distinguen entre mayúsculas y minúsculas, por lo que si en tu página quieres mostrar la imagen foto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas perdidas buscando fallos.

Unidad 1. Conceptos básicos de Dreamweaver CS5 (III)

1.5. Arrancar y cerrar Dreamweaver CS5

• Veamos las dos formas básicas de arrancar Dreamweaver CS5.
  • Desde el botón Inicio Botón de Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú. Puedes comenzar a escribir el nombre del programa, y aparecerá directamente. O puedes pulsar en Todos los programas y buscarlo en la lista con los programas que hay instalados en tu ordenador. Buscar Adobe Dreamweaver CS5 y haz clic sobre él para arrancar el programa.
  • Desde el icono de Dreamweaver CS5 del Escritorio, si lo tienes .
Puedes arrancar Dreamweaver CS5 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios también puedes compaginar dos sesiones de la forma que puedas ver el tema mientras utilizas Dreamweaver, como te explicamos aquí. Básico
• Para cerrar Dreamweaver CS5, podemos utilizar cualquiera de las siguientes operaciones:
  • Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier ventana de Windows.
  • Pulsar la combinación de teclas Alt + F4.
  • Hacer clic sobre el menú Archivo y elegir la opción Salir.
Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedirá confirmación para guardar o no cada uno de ellos.

1.6. Abrir y guardar documentos

• Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:
  • Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible). 
  • Pulsar la combinación de teclas Ctrl + O.
  • Hacer clic sobre el menú Archivo y elegir la opción Abrir....
  • Hacer doble clic sobre el archivo en la ventana del sitio.
  • Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción Abrir conAdobe Dreamweaver CS5.

• Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:
  • Hacer clic en el botón nuevo nuevo de la barra de herramientas estándar (si está visible). 
  • Pulsar la combinación de teclas Ctrl + N.
  • Hacer clic sobre el menú Archivo y elegir la opción Nuevo.
Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en blanco.
En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A continuación pulsamos el botón Crear.
Ventana Nuevo ducumento
• Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
  • Hacer clic en el botón Guardar Guardar de la barra de herramientas estándar. 
  • Pulsar la combinación de teclas Ctrl + S.
  • Hacer clic sobre el menú Archivo y elegir la opción Guardar.
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente con varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar cualquiera de las siguientes operaciones.
  • Hacer clic en el botón Guardar todo Guardar todo de la Barra de herramientas estándar
  • Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.
Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opción guardar todo, ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no utilices esta opción, al menos hasta que te hayas habituado a manejar el programa. De todas formas, observa que cuando hay cambios sin guardar aparece un * tras el nombre del documento ejemplo.htm*.

Unidad 1. Conceptos básicos de Dreamweaver CS5 (IV)

1.7. Mi primera página

Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web sencilla, con varios estilos de texto, una imagen y un enlace a otra página. Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con los elementos básicos con los que están hechas la mayoría de las páginas web. Si nunca has hecho una página web, este es el momento para descubrir lo fácil que es.

Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior como puede hacerse. Abre un documento nuevo y selecciona la Categoría Página básica, HTML, en la columna Diseño dejamos la opción por defecto: <ninguno>.
Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:
Una vez introducido el texto, vamos a modificar el título y el color de fondo del documento.
Para ello podemos hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
Entonces se abrirá una ventana como la que aparece a continuación:
En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser de color azul.
Haz clic en Título/Codificación a la izquierda, y en el Título escribe Mi primera página.
Para aplicar los cambios, pulsa sobre el botón Aceptar.

Unidad 1. Conceptos básicos de Dreamweaver CS5 (V)

Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la carpeta donde estamos creando nuestras páginas, habitualmente en una subcarpeta dedicada a las imágenes.
Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botón derecho del ratón sobre la imagen que queremos traer de Internet, se abre una ventana con una opción similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro. Ten en cuenta que si piensas publicar la página en Internet, hay que respetar los derechos de autor de la imagen.
Copia la imagen que aparece a continuación, para luego poder insertarla en la página web que estamos creando. Guárdala en la carpeta donde vas a guardar la página que acabas de crear.
Ahora vamos a insertar la imagen debajo de la segunda línea de texto. En primer lugar, situamos el cursor al final de la segunda línea y creamos un salto de línea (tecla Enter). Después nos dirigimos al menú Insertar, opción Imagen.
Insertar opción Imagen
En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías guardado, seleccionarla y pulsar Aceptar.
Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto:
Propiedades
Ventana -> Propiedades Si no te aparece, puedes mostrarlo a través del menú Ventana, opción Propiedades.
Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está contraído. Para que te aparezca desplegado debes hacer doble clic en Propiedades.

Selecciona la primera línea de texto. En el inspector de propiedades pulsa HTML y aplica el formato Encabezado 1 (h1) seleccionando el valor Encabezado1 del cuadro Formato.
Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el icono CSS a la izquierda.
Mediante el inspector de propiedades en Dreamweaver CS5 accedemos tanto a las propiedades de CSS como a las propiedades de HTML.
Podemos decir que en una página web, HTML se encarga de estructurar el contenido, la información, mientras que CSS se encarga de mostrar ese contenido con el formato adecuado.

Unidad 1. Conceptos básicos de Dreamweaver CS5 (VI)

Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al texto mediante hojas de estilos en cascada. Los estilos CSS ofrecen un mayor control sobre el diseño de la página Web y reducen el tamaño del archivo.
Selecciona la primera línea. En Regla de destino selecciona <Nuevo estilo en línea>, para aplicar el formato solo al texto seleccionado. También aplica el estilo de Fuente Arial, Helvetica, sans-serif, color azul #009 y centra el texto, tal y como muestra la imagen siguiente:
Observa que hemos centrado el texto pulsando en el botón centrar.
Selecciona la segunda línea de texto, y seleccionando como antes <Nuevo estilo en línea>, marca los botones B I para ponerlo en negrita y cursiva respectivamente.
Vamos a centrar también la imagen. Para ellos selecciónala. Lo que hay que centrar es el contenido del párrafo que la contiene. Para hacerlo, en la barra de estado, encima de las propiedades nos aparece la jerarquía de etiquetas. Haz clic sobre p.
Ahora, en Regla de destino selecciona <Nuevo estilo en línea> y centra el párrafo como hemos visto hasta ahora, pulsando en centrar.
Por último vamos a crear el enlace. Selecciona el texto de la última línea, y cambia el panel de Propiedades a las propiedades de HTML.
En el campo Vínculo, escribe la URL de la página a enlazar, como se ve en la imagen:
Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo, desde la opción Guardar.
Puedes llamar al documento como lo desees, pero la extensión ha de ser htm o html. Por ejemplo, lo hemos llamado miprimerapagina.htm, y la hemos guardado en la misma carpeta que la imagen descargada.
Ahora, puedes ver cómo se ve en tu navegador pulsando la tecla F12.
 
Si pulsas aquí podrás ver cómo debería haber quedado la página después de haber seguido todos los pasos anteriores. Compara esta página con la tuya, para ver si lo has hecho todo bien.

aulaClic. Curso de Dreamweaver CS5. Índice

Cómo utilizar este curso.

Videotutoriales

Ejercicios propuestos

Evaluaciones