Nuestro primer F5 MasTICable 17.Abril.2011

¿De qué va?• Dinámica: Tecnologías en escena• ¿Qué significan todas esas siglas?

▫ HTML▫ XHTML▫ CSS▫ Lenguajes de programación (PHP)▫ Bases de Datos (SQL)

• Herramientas que nos echan una mano (para Firefox):▫ Firebug▫ ColorZilla

• Manos a la obra▫ Código fuente de una página▫ Cambiar un CSS

HTML• Siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto)

• Lenguaje de marcado predominante para la elaboración de páginas web▫ Describe la estructura y el contenido en forma de texto▫ Complementa el texto con objetos (como imágenes).

• HTML se escribe en forma de etiquetas (tags), rodeadas por corchetes angulares (<,>). Por ejemplo: <b> para negrita. Toda etiqueta que se abre debe cerrarse. Para cerrar un tag se usa una / antes. Ejemplo: <b>Texto en negrita</b>

• HTML puede describir, hasta un cierto punto, la apariencia de un documento (CSS hace la tarea más fácil y con mejores resultados).

• Un HTML puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML

XHTML• Acrónimo en inglés de eXtensible Hypertext Markup Language

(lenguaje extensible de marcado de hipertexto)

• Es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas web

• Su versión 1.0, XHTML es solamente la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, más estrictas, de XML.

• Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semántica, donde la información, y la forma de presentarla estén claramente separadas

Diferencias entre HTML y XHTML

Algunas reglas de XHTML 1.0 que lo diferencian de HTML 4.01.

• Los elementos vacíos deben cerrarse siempre: ▫ Incorrecto: <br>▫ Correcto: <br></br> o <br/> o <br />

• Los elementos no vacíos también deben cerrarse siempre: ▫ Incorrecto: <p>Primer párrafo<p>Segundo párrafo▫ Correcto: <p>Primer párrafo</p><p>Segundo párrafo</p>

• Los elementos anidados deben tener un correcto orden de apertura/cierre (el que se abre último, debe cerrarse primero). ▫ Incorrecto: <em><strong>Texto</em></strong>▫ Correcto: <em><strong>Texto</strong></em>

• Los valores de los atributos deben siempre ir encerrados entre comillas (simples o dobles). ▫ Incorrecto: <td rowspan=3>▫ Correcto: <td rowspan="3">▫ Correcto: <td rowspan='3'>

• Los nombres de elementos y atributos deben ir en minúsculas. ▫ Incorrecto: <A HREF="http://www.domname.com">Domname</A>▫ Correcto: <a href="http://www.domname.com">Domname</a>

CSS• Hojas de estilo en cascada (en inglés Cascading Style

Sheets)

• Lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).

• La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

• Tres tipos de estilos▫ hoja de estilo externa▫ hoja de estilo interna▫ estilo en línea

PHP• Acrónimo recursivo que significa PHP Hypertext Pre-processor (inicialmente PHP

Tools, o, Personal Home Page Tools)

• Lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas.

• Es un lenguaje multiplataforma.

• Orientado al desarrollo de aplicaciones web dinámicas con acceso a información almacenada en una base de datos.

• El código fuente escrito en PHP es invisible al navegador web y al cliente ya que es el servidor el que se encarga de ejecutar el código y enviar su resultado HTML al navegador. Esto hace que la programación en PHP sea segura y confiable.

• Capacidad de conexión con la mayoría de los motores de base de datos que se utilizan en la actualidad, destaca su conectividad con MySQL y PostgreSQL.

• PHP 5.3.6 (7 de marzo de 2011)

SQL• Lenguaje de consulta estructurado o SQL (por sus siglas en inglés

structured query language)

• Lenguaje que permite acceder a bases de datos relacionales que permite especificar diversos tipos de operaciones en éstas

• Permite efectuar consultas con el fin de recuperar -de una forma sencilla- información de interés de una base de datos, así como también hacer cambios sobre ella.

• Ejemplo de una sentencia INSERT de SQL para agregar uno o más registros a una (y sólo una) tabla en una base de datos relacional:

INSERT INTO ''tabla'' (''columna1'', [''columna2,... '']) VALUES (''valor1'', [''valor2,...''])

El mejor recurso para “cacharrear”

W3Schools Online Web Tutorials

http://www.w3schools.com/

Tutoriales para:

• HTML• XHTML• CSS• JavaScript• SQL• PHP, etc., etc.

Agradecimientos

Wikipedia :-)