Tutoriales de Programación

jueves, 4 de noviembre de 2010

Curso de TinyMCE en español

Para ver en youtube haz click aquí
Que es TinyMCE:
Es lo que se conoce, como un editor WYSIWYG, lo cual es un acronimo en ingles de: lo que ves es lo que obtienes, y se refiere a los procesadores de texto que muestran directamente el resultado final, y escribir directamente en el, se muestra como una alternativa, a procesadores de texto poco frecuentes el día de hoy, en los que el resultado final no se mostraba hasta el momento de imprimir el documento.

En el caso de TinyMCE esta diseñado para poder ser usado en nuestras paginas web, integrándolo en el HTML de la misma, esta creado en javascript, y es OpenSource.

En la imagen de arriba vemos un ejemplo de tinyMCE aplicado a una textarea

Primera parte del curso: Implementacion y Uso de tinyMCE
Implementacion:
Lo primero, y mas obvio es descargarse la librería haciendo click aqui, luego para ver el primer capitulo del videotutorial dirigete a este enlace
Archivos de Ejemplo:
Para descargar un archivo de ejemplo, con una implementación básica de tinyMCE, haz click aqui

miércoles, 6 de octubre de 2010

Introducción HTML5 Parte 1

Nuevo tutorial HTML5 reciente y actualizado, haz click aquí

Pregunta Básica ¿Que es HTML5?
Es la nueva revisión del lenguaje HTML, especifica dos variantes para su sintaxis, un html clásico, la variante conocida como html5 que asi se llama por ser la quinta revisión importante, y una variante xml conocida XHTML5, esta es la primera vez que html y xhtml se desarrollan en paralelo, dicho de una forma mas simple es un borrador de lo que sera la próxima versión de html
Diferencias entre html y html5
Etiquetas que pasaron al desuso:
<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp>
Etiquetas nuevas en html5:
<article>, <aside>, <audio>, <canvas>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <progress>, <rp>, <rt>, <section>, <source>, <summary>, <time>, <video>, <wbr>
Atributos que pasaron al desuso:
rev y charset en <link /> y <a />, target en <link />, nohref en <area />, profile en <head />, version en <html />, name en <map />, scheme en <meta />, archive, classid, codetype, declare y standby en <object />, valuetype en <param />, charset en <script />, summary en header, axis y abbr en <td /> y <th />
Atributos Estándar nuevos:
Al igual que las versiones html anteriores existen atributos que son aplicables a todas las etiquetas, en html5 se agregan los siguientes:
contenteditable, contextmenu, data-yourvalue, draggable, hidden, item, itemprop, spellcheck, subject
Atributos maneja-dores de Evento nuevos:
onafterprint, onbeforeprint, onbeforeonload, onerror, onhaschange, onmessage, onoffline, ononline, onpagehide, onpageshow, onpopstate, onredo, onresize,onstorage, onundo, onunload

miércoles, 29 de septiembre de 2010

Curso de HTML parte 3

Este curso lo publiqué hace varios años, es probable que este desactualizado, voy a publicar un nuevo curso HTML5 muy pronto, puedes suscribirte a mi canal en youtube o darme like en facebook:
Para ir a mi canal de youtube haz click aquí
Página de Facebook, haz click aquí
Las Tablas
En html una tabla se puede definir de la forma mas simple, diciendo que consisten en un conjunto de columnas que contienen celdas, y permiten organizar cualquier tipo de contenido, en el interior de las mismas,
un ejemplo:
Queremos organizar un horario:

Horario	Lunes	Martes	Miercoles	Jueves	Viernes
Mañana	Trabajo	Trabajo	Trabajo	Trabajo	Trabajo
Receso	Almuerzo	Almuerzo	Almuerzo	Almuerzo	Almuerzo
Tarde	Trabajo	Trabajo	Trabajo	Trabajo	Trabajo

Este es un ejemplo sencillo de la organización de datos, en este caso, un horario básico
Tambien las tablas nos pueden ayudar a organizar el diseño de nuestra pagina web algo asi:

Mi Pagina Web
Columna En este espacio podriamos organizar, columnas de texto, menus laterales, etc	Contenido En este espacio podemos colocar el contenido general de nuestra pagina, en el caso de un blog el ultimo porst publicado etc	Columna En este espacio podriamos organizar, columnas de texto, menus laterales, etc

En este ejemplo vemos como podríamos reorganizar la estructura completa de una pagina de la forma que queramos, que en este caso esconderíamos los bordes y quedaría así:

Mi Pagina Web
Columna En este espacio podriamos organizar, columnas de texto, menus laterales, etc	Contenido En este espacio podemos colocar el contenido general de nuestra pagina, en el caso de un blog el ultimo porst publicado etc	Columna En este espacio podriamos organizar, columnas de texto, menus laterales, etc

Las dos tablas son exactamente iguales, la única diferencia es que la segunda no tiene bordes, los cuales se pueden modificar con el atributo border, que en este caso esta definido como 0, pero en el caso de que no definamos ningún atributo border, el valor por defecto del mismo seria 0, por lo que tampoco se mostraría.
También en el ejemplo anterior vemos el uso de el atributo colspan y rowspan, que permiten, que una celda ocupe el espacio de varias, cambiando la forma natural de una tabla:
Tabla sin rowspan y/o colspan:

Con Colspan:

Con Rowspan:

miércoles, 15 de septiembre de 2010

Curso de Html parte 2

Este curso lo publiqué hace varias años, es probable que este desactualizado, muy pronto voy a publicar un nuevo curso de HTML5, para estar al pendiente suscríbete a mi canal de youtube o dame like en facebook:

Canal de Youtube haz click aquí

Canal de Facebook haz click aquí

Para ver en youtube haz click aquí

Los Atributos:

En html y en cualquier lenguaje de marcado basado en xml o sgml, los atributos son informacion adicional que se agrega a las etiquetas, en algunos casos estos son necesarios para el funcionamiento de las etiquetas, en otros solo brindan detalles específicos, como por ejemplo la anchura, el largo o el color, un ejemplo de atributo seria el siguiente:

Lista de Caracteres especiales en HTML

< = <

> = >

Á = Á

É = É

Í = Í

Ó = Ó

Ú = Ú

&ampaacute; = á

é = é

í = í

ó = ó

ú = ú

Ä = Ä

Ë = Ë

Ï = Ï

Ö = Ö

Ü = Ü

ä = ä

ë = ë

ï = ï

ö = ö

ü = ü

Ã = Ã

Ñ = Ñ

Õ = Õ

ã = ã

ñ = ñ

õ = õ

Ø = Ø

ø = ø

Ð = Ð

ð = ð

ß = ß

¼ = ¼

½ = ½

¾ = ¾

® = ®

ª = ª

² = ²

³ = ³

¹ = ¹

¯ = ¯

µ = µ

¶ = ¶

· = ·

° = °

¸ = ¸

¿ = ¿

× = ×

÷ = ÷

 = “

 = ”

 = Œ

 = ‡

Etiquetas para texto

Primero un repaso a la clase pasada, para recordar las etiquetas que vimos, sabemos que <marquee> crea una marquesina de texto en movimiento, que <b> define un texto en negrirta, que <i> define un texto en itálica, ahora en esta clase veremos mas etiquetas para texto:

<strike>que sirve para mostrar texto con una linea en el medio atravesándolo así: ~~texto de ejemplo~~

Encabezados en html existen 6 tipos de encabezado, que se crean con las etiquetas de encabezado aquí listadas:

<tt> crea texto con el estilo de las maquinas de escribir, ejemplo:

texto con forma de teletipo

<big>sirve para agrandar el texto

<small>encoje el texto

<br /> crea un salto de linea

Archivos de ejemplo:

Clase2.html

domingo, 12 de septiembre de 2010

Curso de Html parte 1

Este curso lo publiqué hace varios años, por lo tanto esta algo desactualizado, muy pronto voy a publicar un nuevo curso de HTML5, puedes suscribirte a mi canal de youtube o darme like en facebook para estar al pendiente de los nuevos tutoriales y cursos que voy a publicar :
Canal de youtube haz click aquí
Facebook, haz click aquí

Para ver en youtube haz click aquí

¿Que es HTML?

Hyper Text Markup Language son sus iniciales, y es un lenguaje de marcado, que se ha convertido en el estándar en la creación de paginas web, su definición seria:

Lenguaje de marcado que se utiliza en la representación de textos en forma de hipertextos y así como para complementar el texto con imágenes y colores, por lo que hasta cierto punto puede incluso describir la presentación del documento, y contener scripts ( como javascript) con los cuales se puede modificar el comportamiento del navegador.

Breve Historia de HTML

La primera descripción de HTML fue un documento llamado html tags, publicado por Tim Benners Lee en 1991, pero no fue si no hasta 1993 cuando la IETF publico la primera proposición para la especificación de HTML, el boceto de HTML de banners lee y Da Conolly, en el cual se incluía una Definición del tipo de documento SGML para definir la gramática.

SGML

Standard Generalized Markup Languge, es un sistema para la organización y etiquetado de documentos, La organización internacional de Estándares, normalizo los estándares lo normalizo en 1996, el SGML sirve para especificar el etiquetado de documentos y no impone en ningún caso un conjunto de etiquetas en especial

XML

Son las iniciales en ingles de Extensible Markup Language, y al igual que SGML es un metalenguaje, que permite definir la gramática de un lenguaje ( al igual que HTML es definido por SGML) y fue desarrollado por World Wide Web Consorium como una simplificación de SGML, y no esta pensado para su uso solo en la web sino para el intercambio de informacion estructurada entre diferentes plataformas.

XHTML

Al igual que HTML esta basado en el SGML, XHTML es el lenguage de marcado pensado para sustituir a HTML como estándar en la creación de paginas web, y es básicamente la versión XML de HTML , su objetivo es avanzar en el proyecto de la W3C de crear una web semántica, donde la presentación y el contenido estén separados

DTD

Definición de tipo de documento (Document Type Definition) es la descripción de la estructura y sintaxis de un documento XML o SGML, su función es describir el formato de datos y así mantener una coherencia entre distintos documentos que usen la misma DTD.

Por tanto un DTD especifica las restricciones en la estructura y sintaxis del mismo, las etiquetas que pueden ser contenidas y el contenido de dichas etiquetas, la estructura ya que indica el orden en le que van las etiquetas dentro del documento, y el anidamiento que dice la forma en la que van etiquetas dentro de otras.

XML_Schema

Es un lenguaje de esquemas utilizado para describir las restricciones y estructura de los documentos XML de forma mas precisa que un DTD, mas alla incluso de las normas en la sintaxis de XML, llegando un muy alto nivel de abstracción en la percepción del tipo de documento

Archivos de Ejemplo:

ejemplo.xml

jueves, 10 de diciembre de 2009

Bucles

Para ver en youtube: Parte 1, Parte 2
Para ir a la lista de reproducción del curso click aquí
Para ir a mi canal de youtube

Los bucles son porciones de código que se ejecutan una y otra vez hasta que una condición deje de cumplirse, y son útiles para la realización automática de tareas repetitivas.
En php existen 3 tipos de bucle: el for, el while y el do.
El bucle While:
Es el más básico y su sintaxis es la siguiente:
$variable //que se va a usar en la condición
while(condición) {
sentencias a ejecutar ;
contador // este permite llegar a un punto en el cual la sentencia deje de ejecutarse
}
El bucle For:
Con una sintaxis más resumida que while:
for($variable;condicion;contador){
sentencia
}
El bucle do:
A diferencia de los demás bucles, do tiene la particularidad de que las condiciones se comprueban después de la sentencia, lo que produce que así la condición no se cumpla a la primera, la sentencia se ejecuta por lo menos una vez, y su sintaxis es la siguiente:

do{
sentencia
contador
}
while(condicion);

viernes, 4 de diciembre de 2009

Sentencias De Control

Para ver en youtube click en estos enlaces: Clase 7, Clase8
Para ir a mi canal de youtube haz click aquí
Para ir a la lista de reproducción del curso click aquí

Las denominadas sentencias de control de flujo nos permiten decidir que parte del código se va a ejecutar, ya que normalmente el interprete php va ejecutando línea por línea el código.
Sentencia if
Es el condicional más sencillo y simplemente devuelve falso si la condición no se cumple, y su sintaxis es la siguiente: if(condición) sentencia que se va a ejecutar si la condición se cumple ;
si la sentencia dentro del condicional ocupa más de una línea se encierra entre llaves así:
if(condición) {
sentencia uno
sentencia dos
etc.
}
Sentencia else
Ejecuta el código en el caso de que la condición if no se cumpla, ya que este se coloca siempre después de if, y su sintaxis es la siguiente:
if (condición) {
sentencias
}
else sentencia
al igual que if, si las sentencias ocupan mas de una la línea se deben encerrar en llaves.
Sentencia Switch
Esta permite seleccionar entre un grupo de opciones de código que se va a ejecutar, y su sintaxis es la siguiente:
swicht($variable){
case "valor 1":
código que queremos que se ejecute
break()
case "valor 2":
código que queremos que se ejecute
break()
default:
código que queremos que se ejecute
break()
}
En este ejemplo, la sentencia default es la que se ejecutaría si ninguna de las condiciones se cumple, y la sentencia break no es obligatoria pero ayuda a reducir la carga de trabajo del procesador.
Calculadora en php:
Parte html:<form action="calculadora.php" method="post" >
<input type="text" name="uno" >
< select name="operador" >
<option> + </option>
<option> - </option>
<option> * </option>
<option> / </option>
</select>
<input type="text" name="dos">
</form>

Parte php:
<?php
if($_POST["operador"] == "+") echo $_POST["uno"] + $_POST["dos"];
if($_POST["operador"] == "-") echo $_POST["uno"] - $_POST["dos"];
if($_POST["operador"] == "*") echo $_POST["uno"] * $_POST["dos"];
if($_POST["operador"] == "/") echo $_POST["uno"] / $_POST["dos"];
?>

Operadores de comparacion:
== Igual
!= Distinto
<> Mayor que
<= Menor o igual >= Mayor o igual

Menu