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 :-)